<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .box{ width: 100px; height: 100px; position: absolute; left:300.5 ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 100px;
height: 100px;
position: absolute;
left:300.54px;
background: red;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<script>
var box=document.getElementById("box");
/*
left top 可以設置小數數值
並且獲取得到的時候也可以得到小數數值
offsetLeft 獲取的只能是整數！！
彈性運動不能用於樣式不能為負數的
比如height padding
*/
function elasticSport(obj,oTarget){
obj.timer=null;//定時器
obj.oSpeed=0;//速度
obj.left=0; //left
clearInterval(obj.timer);
obj.timer=setInterval(function(){
obj.oSpeed+=(oTarget-obj.offsetLeft)/5;
//摩擦力 總是會停止
obj.oSpeed*=0.7;
obj.left+=obj.oSpeed;
//速度足夠小 當前位置足夠接近目標位置 停止計時器
if(Math.abs(obj.oSpeed<1) && Math.abs(obj.left-oTarget)<1){
clearInterval(obj.timer);
obj.style.left=oTarget+"px";
}
else{
obj.style.left=obj.left+"px";
}
document.title=obj.offsetLeft+" | 300";
},1000/60);
}
elasticSport(box,300);
</script>
</body>
</html>
