原生js元素惯性滚动

最新推荐文章于 2021-12-29 16:08:18 发布

寒枫

最新推荐文章于 2021-12-29 16:08:18 发布

阅读量2.6k

点赞数 2

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq379682421/article/details/78796197

版权

javascript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

元素惯性滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>    
#div1{ width:100px; height:100px; background:red; position:absolute; left:0px; top:0;}    
</style>    
<script>    
window.onload=function(){    
    var oDiv=document.getElementById('div1');    
    var iSpeedX=0;    
    var iSpeedY=0;     
    var lastX=0;    
    var lastY=0;    
    var timer=null;     
    let sudu = 0.8;
    oDiv.onmousedown=function(ev){    //div的鼠标按下事件，主要计算鼠标当前位置，和移动位置。这样可以计算出鼠标移动速度。
        var oEvent=ev || event;    
        var disX=oEvent.clientX-oDiv.offsetLeft;    
        var disY=oEvent.clientY-oDiv.offsetTop;      
        clearInterval(timer);      
        document.onmousemove=function(ev){   //鼠标拖动事件。 
            var oEvent=ev || event;     
            oDiv.style.left=oEvent.clientX-disX+'px';    
            oDiv.style.top=oEvent.clientY-disY+'px';    
            iSpeedX=oEvent.clientX-lastX;    
            iSpeedY=oEvent.clientY-lastY;     
            lastX=oEvent.clientX;    
            lastY=oEvent.clientY;  
        }    
        document.onmouseup=function(){    //当鼠标抬起后，清掉移动事件。
            document.onmousemove=null;    
            document.onmouseup=null;   
            oDiv.releaseCapture && oDiv.releaseCapture();      
            startMove();    
        }    
        oDiv.setCapture && oDiv.setCapture();    
        return false; 
    }         
    function startMove(){    //移动函数，主要操作是计算鼠标移动速度和移动方向。
        clearInterval(timer);    
        timer=setInterval(function(){    
            iSpeedY+=3;    
            var t=oDiv.offsetTop+iSpeedY;    
            var l=oDiv.offsetLeft+iSpeedX;    
            if(t>document.documentElement.clientHeight-oDiv.offsetHeight){    
                t=document.documentElement.clientHeight-oDiv.offsetHeight;    
                iSpeedY*=-sudu;    
                iSpeedX*=sudu;  
            }     
            if(t<0){    
                t=0;    
                iSpeedY*=-sudu;    
                iSpeedX*=sudu;  
            }    
            if(l>document.documentElement.clientWidth-oDiv.offsetWidth){    
                l=document.documentElement.clientWidth-oDiv.offsetWidth;   

                iSpeedX*=-sudu;    
                iSpeedY*=sudu;    
            }    
            if(l<0){    
                l=0;    
                iSpeedX*=-sudu;    
                iSpeedY*=sudu;  

            }    

            oDiv.style.left=l+'px';    
            oDiv.style.top=t+'px';    

            if(Math.abs(iSpeedX)<1)iSpeedX=0;    
            if(Math.abs(iSpeedY)<1)iSpeedY=0;    
            if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight){    
                clearInterval(timer);    
            }    
            document.title=i++;    
        },30); 
    }    
};    
</script>    
</head>    
<body>    
<div id="div1"></div>    
</body>
</html>

拖拽，摩擦，甩动元素

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS惯性拖拽</title>
<style>
*{ margin:0; padding:0; list-style:none; font-family: "微软雅黑","张海山锐线体简"}
#div1{width:100px;height:100px;position:absolute;left:0;top:0;border:1px solid #000;}
.box{width:10px;height:10px;background:green; position:absolute;left:0;top:0;}
</style>
<script>
window.onload=function(){
    var oDiv=document.getElementById('div1');
    oDiv.onmousedown=function(ev){
        var speedX=0,speedY=0;  //要求的速度
        var lastX=0,lastY=0;    //最后一次的距离

        var oEvt=ev||event;
        var disX=oEvt.clientX-oDiv.offsetLeft;
        var disY=oEvt.clientY-oDiv.offsetTop;   
        document.onmousemove=function(ev){
            var oEvt=ev||event;
            oDiv.style.left=oEvt.clientX-disX+'px';
            oDiv.style.top=oEvt.clientY-disY+'px';  

            speedX = oDiv.offsetLeft-lastX
            speedY = oDiv.offsetTop-lastY

            lastX=oDiv.offsetLeft
            lastY=oDiv.offsetTop
            console.log(lastX,speedX);  
        };
        document.onmouseup=function(){
            document.onmousemove=document.onmouseup=null;
            //alert(speedX+'|'+speedY); 
            move(oDiv,speedX,speedY);
        };
        return false;
    };  

    function move(obj,speedX,speedY){
        clearInterval(obj.timer);
        obj.timer=setInterval(function(){
            speedX*=0.95    //摩擦
            speedY*=0.95    //摩擦
            obj.style.left=obj.offsetLeft+speedX+'px';
            obj.style.top=obj.offsetTop+speedY+'px';
            if(Math.abs(speedX)<1) speedX=0;
            if(Math.abs(speedY)<1) speedY=0;
            if(speedX==0&&speedY==0){
                clearInterval(obj.timer);   
            }
            console.log(speedX,speedY);
        },30);  
    }
};
</script>
</head>
<body>
<div id="div1"><img style="width:100%" src="cc.png" alt=""></div>
</body>
</html>

寒枫

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
原生js元素惯性滚动

元素惯性滚动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=ed
复制链接

扫一扫