javascript代碼寫拋物運動
寫一個元素，點擊後跟隨鼠標運動，鬆開鼠標後，自由運動，但物體有重力效果。
一、HTML
<input type="button" value="開始運動" onclick="startMove()" />
<div id="div1" ></div>
二、CSS
#div1 {
width:100px;
height:100px;
/*設置元素背景,徑向變化*/
background:radial-gradient(red 15%,yellow 30%,green 80%);
position:absolute;
/*設置圓角*/
border-radius: 50%;
}
三、script
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var lastX=0;
var lastY=0;
oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;
var disX=oEvent.clientX-oDiv.offsetLeft;
var disY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=function (ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
iSpeedX=l-lastX;
iSpeedY=t-lastY;
lastX=l;
lastY=t;
document.title='x:'+iSpeedX+', y:'+iSpeedY;
};
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
startMove();
};
clearInterval(timer);
};
};
var timer=null;
var iSpeedX=10;
var iSpeedY=10;
function startMove()
{
clearInterval(timer);
timer=setInterval(function (){
var oDiv=document.getElementById('div1');
iSpeedY+=3;
var l=oDiv.offsetLeft+iSpeedX;
var t=oDiv.offsetTop+iSpeedY;
if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
{
iSpeedY*=-0.8;
iSpeedX*=0.8;
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}
else if(t<=0)
{
iSpeedY*=-1;
iSpeedX*=0.8;
t=0;
}
if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
{
iSpeedX*=-0.8;
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}
else if(l<=0)
{
iSpeedX*=-0.8;
l=0;
}
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);
alert('停止');
}
else
{
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
}
document.title=iSpeedX;
}, 30);
}
四、最終效果
