用js做一個簡單的鼠標慣性動畫
<style type="text/css">
#div1{
width: 50px;
height: 50px;
background: red;
position: absolute;
left: 0px;
top: 0px;
}
</style>
<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>
感覺很好玩，可以自己寫寫看