Decadeeeee
Decadeeeee
2020-08-06 13:00
采纳率: 46.2%
浏览 84

js实现控件水平移动,为什么移不动呢?

图片说明

图片说明
图片说明
图片说明

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .scroll{
            overflow-x:scroll;
            position: absolute;
        }
        .scroll::-webkit-scrollbar{
            display: none;
        }
        .one{
            display: flex;
            position: relative;
            left: 1px;
        }
        .s{
            width: 404px;
            height: 240px;
            display: flex;
            margin:10px 10px 10px 0px;
            box-shadow:0px 0px 8px rgb(187, 182, 182);
            border-radius: 15px;
            background-color:aqua
        }
    </style>
</head>
<body>

    <div class="scroll">
        <div class="one">
            <div class="s" style="background-color:aqua"></div>
            <div class="s" style="background-color:rgb(19, 150, 84)"></div>
            <div class="s" style="background-color:rgb(255, 251, 0)"></div>
            <div class="s" style="background-color:rgb(17, 0, 255)"></div>
            <div class="s" style="background-color:rgb(255, 0, 212)"></div>
            <div class="s" style="background-color:rgb(255, 0, 34)"></div>
            <div class="s" style="background-color:rgb(204, 207, 212)"></div>
        </div>
    </div>

</body>
<script type="text/javascript">
    window.onload = function () {
        var one = document.getElementsByClassName("one")[0];
        var isMove = false;
        var startLeft;
        var startX;
        // mousedown鼠标事件:当用户点击鼠标在元素上就会触发该事件
        one.addEventListener('mousedown', function (e1) {
            // mousemove 鼠标事件:当鼠标指针在元素上移动就会触发此事件
            /**
             * e:指事件,在火狐浏览器中事件用window.event,所以只有把 event
             *    所以只有把event传给函数使用。为了兼容火狐和浏览器,一般会在函数里自动
             *    重新赋值: e = e || window.event;
            */
            // startLeft= one.style.offsetLeft;
            isMove = true;
            document.addEventListener('mousemove', function (e) {
                    if(isMove)
                    one.style.left  =parseInt(one.style.left) +(e.clientX - e1.clientX) + 'px';
                });
        });
        one.addEventListener('mouseup',function(){
            isMove=false;
        });

        one.addEventListener('mouseout',function(){
            isMove=false;
        })
    }
</script>
</html>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • jingluan666
    jingluan666 2020-08-06 14:07
    已采纳

    mousemove为什么要写在mousedown的里面?

    点赞 评论

相关推荐