用JavaScript简单写一个鼠标拖动惯性动画，弹跳球

本文链接：https://blog.csdn.net/w161513820/article/details/107158571
<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>