...
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset='utf-8' />
<style>
#div1{width: 100px; height: 100px; background: red; position: absolute; left: 0; top: 40px;}
</style>
<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>
</head>
<body>
<input type="button" value="開始運動" onclick="startMove()"/>
<div id="div1"></div>
</body>
</html>
