您好,欢迎来到宝玛科技网。
搜索
您的当前位置:首页纯js实现左右拖动父元素,可以滚动子元素,有惯性效果,复制代码即可使用,拿来即用

纯js实现左右拖动父元素,可以滚动子元素,有惯性效果,复制代码即可使用,拿来即用

来源:宝玛科技网

<style>
    #tag{
        background: #eee;
        cursor: move;
        display: flex;overflow: hidden;
    }
    #tag div{
        border: 20px solid #fff;
        background: #dddddd;
        width: 33.33%;
        height: 200px;
        flex: none;

    }
</style>
<div id="tag"></div>

<script>
    var html=""
    var tag=document.getElementById('tag');
    for(var i=0;i<100;i++){
        html+="<div>"+i+"</div>";
        // $("#tag").append("<div>"+i+"</div>");
    }
    tag.innerHTML=html;
    
    window.onload = function(){
        var timer=null;//定时器
        var movex=0;//左右移动距离
        var num=0;//onmousemove次数
        var drag = document.getElementById('tag');
        // //点击某物体时,用drag对象即可,onmousemove和onmouseup是全局区域,
        // 也就是整个文档通用,应该使用document对象而不是drag对象(否则,采用drag对象时物体只能往右方或下方移动)
        drag.onselectstart= function () {
            return false;
        }
        drag.ondragstart = function () {
            return false
        }
        drag.onmousedown = function(event){
            clearInterval(timer)
            var event = event || window.event;  //兼容IE浏览器
            var x=event.clientX;
            document.onmousemove = function(event){

                var event = event || window.event;
                movex= event.clientX-x;
                console.log(num++,movex);
                drag.scrollLeft+=movex
            }
            document.onmouseup = function(event){
                this.onmousemove = null;
                this.onmouseup = null;
                // return
                timer=setInterval(function () {
                    movex=movex/1.1;
                    // console.log(timer);
                    // console.log(movex);
                    if(Math.abs(movex)<2){
                        clearInterval(timer)
                    }
                    drag.scrollLeft+=movex

                },25)

                //修复低版本ie bug
                if(typeof drag.releaseCapture!='undefined'){
                    drag.releaseCapture();
                }
            }
        }
    }
</script>

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- baomayou.com 版权所有 赣ICP备2024042794号-6

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务