您正在使用IPV4(3.236.253.192)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情       【腾讯云】云产品限时秒杀,爆款1核2G云服务      
虚位以待
2021年 冬至节 56
2021年 圣诞节 60
2022年 元 旦 67
2022年 春 节 98
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    js实现拖动滑块效果
    内容摘要: !DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'metahttp-equiv='X-UA-Compatible'content='IE=edge'metaname='viewport'content='width=device-width,initial-scale=1.0'titleDocument/titl......
    <!DOCTYPEhtml>

    <htmllang="en">

    <head>

    <metacharset="UTF-8">

    <metahttp-equiv="X-UA-Compatible"content="IE=edge">

    <metaname="viewport"content="width=device-width,initial-scale=1.0">

    <title>Document</title>

    <style>

    *{

    margin:0;

    padding:0;

    box-sizing:border-box;

    }

    div{

    width:60px;

    height:60px;

    background-color:coral;

    border-radius:20%;

    position:absolute;

    border:6pxsolidskyblue;

    left:0;

    top:0;

    }

    </style>

    </head>

    <body>

    <div></div>

    <script>

    letdiv=document.querySelector('div')

    letx,y

    letfn=function(e){

    //console.log('hhhhhhhh')

    div.style.left=e.clientX-x+'px'

    div.style.top=e.clientY-y+'px'

    if(e.clientX-x<30){

    div.style.left=0

    }

    if(e.clientY-y<30){

    div.style.top=0

    }

    if(e.clientX-x>document.documentElement.clientWidth-div.offsetWidth-30){

    div.style.left=document.documentElement.clientWidth-div.offsetWidth+'px'

    }

    if(e.clientY-y>document.documentElement.clientHeight-div.offsetHeight-30){

    div.style.top=document.documentElement.clientHeight-div.offsetHeight+'px'

    }

    }

    div.addEventListener('mousedown',function(e){

    x=e.offsetX

    y=e.offsetY

    document.addEventListener('mousemove',fn)

    })

    div.addEventListener('mouseup',function(){

    document.removeEventListener('mousemove',fn)

    })

    </script>

    </body>

    </html>

    版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
    上一篇:js版实现计算器功能 下一篇:利用JavaScript的%做隔行换色的实例
    发布日期:2021/9/28
    手机扫二维码直达本页
    发布时间:11:55:53
    点击:303
    录入:齐天大圣
    相关文章
    Baidu
    YiJiaCMS 6.0.6.10688 Build 21.10.13(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    ©2000-2021