碰撞運動+重力+拖拽+摩擦力的小實列

HTML部分：

<input type="button" value="開始運動" onclick="startMove()" />
		<div id="div1"></div>

css部分：

#div1 {
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
				left: 0;
				top: 40px;
			}

js部分（注：有詳細的文字提示）：

<script>
			//添加拖拽功能

			window.onload = function() {
				var oDiv = document.getElementById('div1');

				//當在oDiv中點擊鼠標(這裏會用到事件對象),則將獲取X,Y鼠標當前位置-oDiv
				//當前的left和top值,獲取到鼠標離oDiv最左邊/上邊的距離
				oDiv.onmousedown = function(ev) {
					var oEvent = ev || event;

					var disX = oEvent.clientX - oDiv.offsetLeft;
					var disY = oEvent.clientY - oDiv.offsetTop;

					//當在文檔中移動鼠標時,則將當前鼠標座標-已處理好的disX和disY,獲取到oDiv.left/top值
					document.onmousemove = function(ev) {
						var oEvent = ev || event;

						var l = oEvent.clientX - disX;
						var t = oEvent.clientY - disY;

						//oDiv的left/top值=獲取到的oDiv.left/top值,則用戶如何移動left/top隨之改變
						oDiv.style.left = l + "px";
						oDiv.style.top = t + "px";
					};

					//當鼠標在文檔鬆開時,則把鼠標移動/鬆開的方法置空.
					document.onmouseup = function() {
						document.onmousemove = null;
						document.onmouseup = null;

						//在鼠標鬆開時調用startMove函數,實現自由彈跳
						startMove();
					};

					//當鼠標移動時,則關閉定時器,爲了不跟startMove函數搶定時器.
					clearInterval(timer);
				};
			};

			//定義X和Y軸速度;
			var speedX = 25;
			var speedY = 100;
			var timer = null;

			function startMove() {
				clearInterval(timer);
				timer = setInterval(function() {
					var oDiv = document.getElementById("div1");
					//每次Y軸+2,越彈越高
					speedY += 5;
					//把X,Y軸速度存起來,便意使用
					var l = oDiv.offsetLeft + speedX;
					var t = oDiv.offsetTop + speedY;

					//當T大於了可視化區域-oDIV的高度,就使oDiv愈來愈慢,隨之等於可視化區域-oDiv當前高度.避免了撐大可視化區域
					if(t > document.documentElement.clientHeight - oDiv.offsetHeight) {
						//Y*-0.8 使越彈越矮;固然也要讓X軸愈來愈小,隨之T等於可視化區域-oDiv當前高度
						speedY *= -0.8;
						speedX *= 0.8;
						t = document.documentElement.clientHeight - oDiv.offsetHeight;
					}

					//當T小余等於0時,使Y軸*=-0.8,使越彈越矮;固然也使X軸變慢,隨之T=0,避免了撐大可視化區域
					else if(t <= 0) {
						speedY *= -1;
						speedX *= 0.8
						t = 0;
					}

					//當L大於了可視化區域-oDIV的寬度,就使oDiv愈來愈慢,隨之等於可視化區域-oDiv當前寬度.避免了撐大可視化區域
					if(l > document.documentElement.clientWidth - oDiv.offsetWidth) {
						//X*-0.8 使越彈越矮,隨之L等於可視化區域-oDiv當前高度
						speedX *= -0.8;
						l = document.documentElement.clientWidth - oDiv.offsetWidth
					}

					//當L小余等於0時,使X軸*=-0.8,使越彈越矮;隨之L=0,避免了撐大可視化區域
					else if(l <= 0) {
						speedX *= -0.8;
						l = 0;
					}

					//當X和Y軸的絕對值小余1時,則X和Y軸=0; 避免負小數點出現偏差
					if(Math.abs(speedX) < 1) {
						speedX = 0;
					}
					if(Math.abs(speedY) < 1) {
						speedY = 0;
					}

					//中止條件:當X,Y軸速度都爲0時,而且t=可視化高度-oDiv.offsetHeight,則關閉定時器
					if(speedX == 0 && speedY == 0 && t == document.documentElement.clientHeight - oDiv.offsetHeight) {
						clearInterval(timer);
					} else {

						//添加oDIV速度
						oDiv.style.left = l + "px";
						oDiv.style.top = t + "px";
					}

					document.title = speedX;
				}, 30)
			}
		</script>

 

注：看到不錯的效果，向你們分享一下。

原文地址：http://www.cnblogs.com/xiaojiangk/p/7680823.html