用js做一个鼠标惯性动画

最新推荐文章于 2023-07-31 09:14:29 发布

芒果大胖砸

最新推荐文章于 2023-07-31 09:14:29 发布

阅读量449

点赞数

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

原文链接：https://zhidao.baidu.com/question/809498405938654852.html

版权

js 同时被 2 个专栏收录

17 篇文章 1 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

用js做一个简单的鼠标惯性动画

<style type="text/css">
			#div1{
				width: 50px;
				height: 50px;
				background: red;
				position: absolute;
				left: 0px;
				top: 0px;
			}
		</style>

<body>
		<div id="div1">
			
		</div>
		<script type="text/javascript">
			window.onload=function(){    
			//     var oDiv=document.getElementById('div1');   
				var oDiv=document.querySelector('#div1')
				console.log(oDiv) 
			    var iSpeedX=0;    
			    var iSpeedY=0;     
			    var lastX=0;    
			    var lastY=0;    
			    var timer=null;     
			//div的鼠标按下事件，主要计算鼠标当前位置，和移动位置。这样可以计算出鼠标移动速度。
			    oDiv.onmousedown=function(ev){    
			        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*=-0.8;    
			                iSpeedX*=0.8;  
			            }     
			            if(t<0){    
			                t=0;    
			                iSpeedY*=-0.8;    
			                iSpeedX*=0.8;  
			            }    
			            if(l>document.documentElement.clientWidth-oDiv.offsetWidth){    
			                l=document.documentElement.clientWidth-oDiv.offsetWidth;   
			     
			                iSpeedX*=-0.8;    
			                iSpeedY*=0.8;    
			            }    
			            if(l<0){    
			                l=0;    
			                iSpeedX*=-0.8;    
			                iSpeedY*=0.8;  
			     
			            }    
			                 
			            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=l++;    
			        },30); 
			    }    
			};    
		</script>
	</body>

感觉很好玩，可以自己写写看

芒果大胖砸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用js做一个鼠标惯性动画

用js做一个简单的鼠标惯性动画<style type="text/css"> #div1{ width: 50px; height: 50px; background: red; position: absolute; left: 0px; top: 0px; } </style><body> <div id="div1"> </div> <script
复制链接

扫一扫

专栏目录