PC端的鼠标拖拽滑动

1、滑块拖拽

html：

<div id="div1">

js：

<script>
var oDiv=null;
var disX=0;
var disY=0;

window.onload=function ()
{
    oDiv=document.getElementById('div1');
    
    oDiv.onmousedown=fnDown;
};

function fnDown(ev)
{
    var oEvent=ev||event;
    disX=oEvent.clientX-oDiv.offsetLeft;
    disY=oEvent.clientY-oDiv.offsetTop;
    
    document.onmousemove=fnMove;
    document.onmouseup=fnUp;
}

function fnMove(ev)
{
    var oEvent=ev||event;
    
    oDiv.style.left=oEvent.clientX-disX+'px';
    oDiv.style.top=oEvent.clientY-disY+'px';
}

function fnUp()
{
    document.onmousemove=null;
    document.onmouseup=null;
}
</script>

 

2、鼠标滑动滑块

html

<div class="box">
    <ul class="drag">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
    </ul>
</div>

css

    *{
        padding:0;
        margin: 0;
    }
    .box {
        position: absolute;
        top:100px;
        width:100%;
         height:100px;
        overflow: hidden;
        left: 0;
        font-size: 0;
    }
.drag {
  position:absolute;
  top:0;
  left:0;
  padding:0;
  height:100px;
  -webkit-user-select: none;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  
}
.drag li{
    display: inline-block;
    width: 300px;
    height: 100px;
    background: blue;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

js

$(document).ready(function(){ 
  var move=false;
  var _x,_y;
  var item =$(".drag li");
  var len=0;
  for(var i=0;i<item.length;i++){
      len+=$(".drag li").eq(i).outerWidth(true);
  }
  $(".drag").css({"width":len});
  
  $(".drag").mousedown(function(e){ 
    move=true; 
    _x=e.pageX-parseInt($(".drag").css("left")); 
    // _y=e.pageY-parseInt($(".drag").css("top")); 
  }); 
  $(document).mousemove(function(e){ 
    if(move){ 
      var x=e.pageX-_x;//控件左上角到屏幕左上角的相对位置 
      var y=e.pageY-_y;
      var distansR=-($('.drag').width()-$(window).width());
      console.log($(window).width(),distansR)
    //   $(".drag").css({"top":y,"left":x}); 
        if(x>0){
            $(".drag").css({"left":0});
            return false;
        }
        console.log(x,distansR);
        if(x<distansR){
            $(".drag").css({"left":distansR});
            console.log("不能在右滑啦")
            return false;
        }
        $(".drag").css({"left":x});
        
    } 
  }).mouseup(function(){ 
    move=false; 
  }); 
})

应用场景实现进度区域的滑动，下面时间轴跟着显示相应的时间点，点击时间轴，进度条跟着展示相应的区域！！

 

 3、滑动滑块，切换页面

css：

*{
                margin:0;
                padding: 0;
            }
              .lineDiv {
                position: relative;
                height: 5px;
                background: red;
                width: 500px;
                margin: 50px auto;
            }
             
            .lineDiv .minDiv {
                position: absolute;
                top: -5px;
                left: 0;
                width: 15px;
                height: 15px;
                background: green;
                cursor: pointer
            }
             
            .lineDiv .minDiv .vals {
                position: absolute;
                font-size: 20px;
                top: -45px;
                left: -10px;
                width: 35px;
                height: 35px;
                line-height: 35px;
                text-align: center;
                background: blue;
            }
             
            .lineDiv .minDiv .vals:after {
                content: "";
                width: 0px;
                height: 0px;
                border-top: 6px solid blue;
                border-left: 6px solid transparent;
                border-right: 6px solid transparent;
                border-bottom: 6px solid transparent;
                display: block;
                margin-left: 11px;
            }
            
            .scroll-box{
                position: absolute;
                top: 291px;
                left: 0;
                height: 280px;
                width: 100%;
                overflow: hidden;
            }
            .scroll-box ul {
                position: absolute;
                left:0;
                width: 5000px;
                user-select: none;
                font-size: 0;
                
            }
            .scroll-box li {
                display: inline-block;
                width: 500px;
                background-color: red;
                height: 200px;
                border:1px solid #ccc;
                    box-sizing: border-box;
            }

html：

<div class="scroll-box" id="scroll-box">
            <ul id="contain" class="drag">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
            </ul>
        </div>
        <center>
        <h3>用鼠标拖动小方块<span id="msg">0</span>%</h3>
        </center>
        <div id="lineDiv" class="lineDiv">
            <div id="minDiv" class="minDiv">
                <div id="vals" class="vals">0</div>
            </div>
        </div>

js：

        <script>
            window.onload = function() {
                var contain = document.getElementById('contain');
                var lineDiv = document.getElementById('lineDiv'); //长线条
                var minDiv = document.getElementById('minDiv'); //小方块
                var msg = document.getElementById("msg");
                var vals = document.getElementById("vals");
                var ifBool = false; //判断鼠标是否按下
                //事件
                var start = function(e) {
                    e.stopPropagation();
                    ifBool = true;
                    console.log("鼠标按下")
                }
                var move = function(e) {
                    console.log("鼠标拖动")
                    if(ifBool) {
                        if(!e.touches) {    //兼容移动端
                            var x = e.clientX;
                        } else {     //兼容PC端
                            var x = e.touches[0].pageX;
                        }
                        //var x = e.touches[0].pageX || e.clientX; //鼠标横坐标var x
                        var lineDiv_left = getPosition(lineDiv).left; //长线条的横坐标
                        var minDiv_left = x - lineDiv_left; //小方块相对于父元素（长线条）的left值
                        if(minDiv_left >= lineDiv.offsetWidth - 15) {
                            minDiv_left = lineDiv.offsetWidth - 15;
                        }
                        if(minDiv_left < 0) {
                            minDiv_left = 0;
                        }
                        //设置拖动后小方块的left值
                        minDiv.style.left = minDiv_left + "px";
                        msg.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
                        vals.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
                        
                        abc((minDiv_left / (lineDiv.offsetWidth - 15)));
                        
                    }
                }
                var end = function(e) {
                        console.log("鼠标弹起")
                        ifBool = false;
                    }
                    //鼠标按下方块
//              minDiv.addEventListener("touchstart", start);
                minDiv.addEventListener("mousedown", start);
                //拖动
//              window.addEventListener("touchmove", move);
                window.addEventListener("mousemove", move);
                //鼠标松开
//              window.addEventListener("touchend", end);
                window.addEventListener("mouseup", end);
                //获取元素的绝对位置
                function getPosition(node) {
                    var left = node.offsetLeft; //获取元素相对于其父元素的left值var left
                    var top = node.offsetTop;
                    current = node.offsetParent; // 取得元素的offsetParent
                    　 // 一直循环直到根元素
                    　　
                    while(current != null) {　　
                        left += current.offsetLeft;　　
                        top += current.offsetTop;　　
                        current = current.offsetParent;　　
                    }
                    return {
                        "left": left,
                        "top": top
                    };
                }
            }
            function abc(percent){
                var distansR=($('.drag').width()-$(window).width()); //可以右滑的极限
                console.log(-parseInt(percent*distansR + "px"));
                var oLeft = (-parseInt(percent*distansR))+ "px";
                $("#contain").css("left",oLeft);
                $("#contain").addClass("ggg");
            }
        </script>

 

转载于:https://www.cnblogs.com/qdlhj/p/9959823.html