JS无卡顿滑块移动_js kuailewl-CSDN博客

本文链接：https://blog.csdn.net/mmm_morning/article/details/120883225

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>丝滑的滑块移动</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color:indianred;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    window.onload=function(event){
        
        var box=document.getElementById("box");
       //鼠标拖拽滑动
        box.onmousedown=function(Event){
            event=event||window.event;
             // 获取滑块偏移量
            var left=Event.clientX-box.offsetLeft;
            var top=Event.clientY-box.offsetTop;
            document.onmousemove=function(event){
                event=event||window.event;
                box.style.left=event.clientX-left+"px";
                box.style.top=event.clientY-top+"px";
            }

            document.onmouseup=function(){
                 document.onmousemove=null;
                 document.onmouseup=null;
            }
        

            
        }
        //键盘控制滑动
        //定义方向和速度变量用于控制方向和速度
        var dir=0;
        var speed=10;
        // 控制方向
        document.onkeydown=function(event){
            event=event||window.event;
            dir=event.keyCode;
            if(event.ctrlKey){
                speed=50;
            }else{
                speed=10;
            }

        };
        document.onkeyup=function(){
            dir=0;
        };
        // 定时器控制速度
        setInterval(function(){
            switch(dir){
                case 37:
                    box.style.left=box.offsetLeft-speed+"px";
                    break;
                case 38:
                    box.style.top=box.offsetTop-speed+'px';
                    break;
                case 39:
                    box.style.left=box.offsetLeft+speed+"px";
                    break;
                case 40:
                    box.style.top=box.offsetTop+speed+'px';
                    break;
            }
        },10);
    }
</script>
</html>