js模拟弹性运动+自由落体，拖动滚动条自动下坠

最新推荐文章于 2022-07-13 08:05:27 发布

前端20187

最新推荐文章于 2022-07-13 08:05:27 发布

阅读量3k

点赞数 1

文章标签： javascript 拖拽弹性运动

本文链接：https://blog.csdn.net/wmjblog/article/details/10579583

版权

利用物体运动最后两点之间的距离作为速度，每次碰撞速度乘以一个小于1的数来模拟摩擦力并乘以-1使之向反方向运动！拖动滚动条自动下坠

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	body{ position:relative; height:5000px;}
	.div1{ width:100px; height:100px;  position:absolute; left:0;top:200px;}
	h1{ text-align:center;}
</style>
<script type="text/javascript">
	window.οnlοad=function()
	{
		var oDiv=document.getElementById('div1')
		var nClientW=document.documentElement.clientWidth   //获取可视宽
		var nClientH=document.documentElement.clientHeight  //获取可视高
		var nScrollT=document.documentElement.scrollTop||document.body.scrollTop  //可滚动高度
		oDiv.style.left=(nClientW-oDiv.offsetWidth)/2+'px'
		
		var timer=null
		var oLeft=0
		var oTop=0
		
		var L=0
		var T=0
		
		var speedX=0
		var speedY=0
		starmove(oDiv)
		window.οnscrοll=function()
		{
			nClientH=document.documentElement.clientHeight ||document.body.scrollTop //获取可视高
			nScrollT=document.documentElement.scrollTop||document.body.scrollTop  //可滚动高度
			starmove(oDiv)	
		}
		oDiv.οnmοusedοwn=function(ev)
		{
			clearInterval(timer)
			var ev=ev||window.event
			var disX=ev.clientX-oDiv.offsetLeft  //获得按下点与div左边距
			var disY=ev.clientY-oDiv.offsetTop  //获得按下点与div上边距
			
			var oldX=ev.clientX
			var oldY=ev.clientY
			document.οnmοusemοve=function(ev)
			{
				var ev=ev||window.event
				speedX=ev.clientX-oldX  //最近两点之间的距离作为速度
				speedY=ev.clientY-oldY
				
				oLeft=ev.clientX-disX   //拖动后div的left
				oTop=ev.clientY-disY   //拖动后div的top
				
				oldX=ev.clientX
				oldY=ev.clientY
				
				if(oLeft<0)
				{
					oLeft=0	
				}
				else if(oLeft>nClientW-oDiv.offsetWidth)
				{
					oLeft=nClientW-oDiv.offsetWidth
				}
				if(oTop<0)
				{
					oTop=0	
				}
				else if(oTop>nClientH-oDiv.offsetHeight)
				{
					oTop=nClientH-oDiv.offsetHeight
				}
				
				oDiv.style.left=oLeft+'px'
				oDiv.style.top=oTop+'px'
				
				if(oDiv.setCapture)
				{
					oDiv.setCapture()
				}
			}
			
			document.οnmοuseup=function()
			{
				document.οnmοusemοve=null
				document.οnmοuseup=null	
				
				if(oDiv.releaseCapture)
				{
					oDiv.releaseCapture()	
				}
				starmove(oDiv)
			}
			return false;
		}
		
		function starmove(obj)
		{
			clearInterval(timer)
			timer=setInterval(function(){
				
				speedY+=3
				L=obj.offsetLeft+speedX
				T=obj.offsetTop+speedY
				
				if(L<=0)
				{
					L=0
					speedX*=-1
					speedX*=0.4
				}
				else if(L>=nClientW-obj.offsetWidth)
				{
					L=nClientW-obj.offsetWidth
					
					speedX*=-1
					speedX*=0.4
				}
				
				if(T<=0)
				{
					T=0	
					
					speedY*=-1
					speedX*=0.8
					speedY*=0.8
				}
				else if(T>=(nScrollT+nClientH-obj.offsetHeight))
				{
					T=nScrollT+nClientH-obj.offsetHeight
					
					speedY*=-1
					speedX*=0.8
					speedY*=0.8
					document.title=T
				}
				
				obj.style.left=L+'px'
				obj.style.top=T+'px'
					
			},30)	
		}
		

	}
</script>
</head>

<body>
<div class="div1" id="div1"><img src="http://img02.taobaocdn.com/imgextra/i2/620343336/T2qsaZXbVbXXXXXXXX-620343336.jpg" /></div>
</body>
</html>

前端20187

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js模拟弹性运动+自由落体，拖动滚动条自动下坠

利用物体运动最后两点之间的距离作为速度，每次碰撞速度乘以一个小于1的数来模拟摩擦力并乘以-1使之向反方向运动！无标题文档 .div1{ width:100px; height:100px; position:absolute; left:0;top:0;} h1{ text-align:center;} window.onload=function() { va
复制链接

扫一扫