Decadeeeee 2020-08-06 20:36 采纳率: 100%
浏览 334
已采纳

为什么我的水平拖动会卡顿?

图片说明

<!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 type="text/css">
        .scroll{
            position: absolute;
        }
        .one{
            display: flex;
            position: relative;
            overflow: hidden;
        }
        .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" style="left:0">
            <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;
        var a=one.style.left;
        // mousedown鼠标事件:当用户点击鼠标在元素上就会触发该事件
        one.addEventListener('mousedown', function (e1) {
            // mousemove 鼠标事件:当鼠标指针在元素上移动就会触发此事件
            /**
             * e:指事件,在火狐浏览器中事件用window.event,所以只有把 event
             *    所以只有把event传给函数使用。为了兼容火狐和浏览器,一般会在函数里自动
             *    重新赋值: e = e || window.event;
            */
            // startLeft= one.style.offsetLeft;
            isMove = true;
            startX=e1;
        });
        document.addEventListener('mousemove', function (e) {

            if(isMove ){
                one.style.left=a+(e.clientX - startX.clientX)+'px';
                a=parseInt(one.style.left)
            }
        });
        one.addEventListener('mouseup',function(){
            isMove=false; 
        });

        one.addEventListener('mouseout',function(){

            isMove=false;
        })

    }
</script>

<!-- <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script language="javascript">
$(document).ready(function(){
    $("#right1").click(function(){
        $(".block1").animate({left: '+=50px'}, "slow");
    });
    $("#left1").click(function(){
        $(".block1").animate({left: '-=50px'}, "slow");
    });
});
</script> -->

</html>
  • 写回答

1条回答 默认 最新

  • zqbnqsdsmd 2020-08-07 10:51
    关注
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 请提交代码 2月17日
  • 已采纳回答 10月12日

悬赏问题

  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 关于#r语言#的问题:差异分析前数据准备,报错Error in data[, sampleName1] : subscript out of bounds请问怎么解决呀以下是全部代码:
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)