zoukankan      html  css  js  c++  java
  • 原生js鼠标拖拽div左右滑动

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    <script type="text/javascript" src="/jquery-1.11.0.min.js"></script>
    
        <style>
            body{
                position: relative;
                margin:0;
                padding:0;
                width:100%;
                height: 1000px;
            }
            #box{
                height: 500px;
                width:100%;
                background: #CDCDCD;
            }
            #small-box{
                height: 500px;
                width:500px;
                position: absolute;
                left:0;
                top:0;
                background: #FF66CC;
                cursor:move ;
                opacity: 0.7;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div id="small-box"></div>
        </div>
    <script>
        var box=$("#small-box");
        var body=$('body');
        var index=0;
        var x1;
        box.mousedown(function(){
            index=1;              //鼠标按下才能触发onmousemove方法
            var x=event.clientX;     //鼠标点击的坐标值,x
            var left= this.style.left;
            left=left.substr(0,left.length-2);   //去掉px
            x1=parseInt(x-left);
        });
        box.mousemove(function(){
            if(index===1){
                this.style.left=event.clientX-x1+'px';
                if(this.style.left.substr(0,this.style.left.length-2)<0){
                    this.style.left=0;
                };
                if(this.style.left.substr(0,this.style.left.length-2)>500){
                    this.style.left='500px';
                };//最大滑动距离
            }
        });
        box.mouseup(function(){
            index=0;
        });
        body.mouseup(function(){
            index=0;
        });
    </script>
    </body>
    </html>
  • 相关阅读:
    HTML5 Application Cache
    一个页面多个bootstrip轮播以及一个页面多个swiper轮播 冲突问题
    jquery中attr和prop的区别
    eval函数的工作原理
    JSON.parse 函数
    JS知识体系
    闭包
    io输入输出与反射机制2
    IO输入输出与反射机制1
    项目-超市会员管理系统
  • 原文地址:https://www.cnblogs.com/xinlvtian/p/12180715.html
Copyright © 2011-2022 走看看