運動框架（二）starmove(obj,iTarget)
阿新 • • 發佈：2018-12-16
此運動框架支援多物體單屬性緩衝運動，不支援透明度變化
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/index.css"/> </head> <body> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <script src="js/index.js"></script> </body> </html>
div{
width: 200px;
height: 70px;
background-color: red;
margin-top: 10px;
}
var aDiv=document.getElementsByTagName("div"); for(var i=0;i<aDiv.length;i++) { aDiv[i].timer=null; aDiv[i].onmouseover=function () { starMove(this,400); } aDiv[i].onmouseout=function () { starMove(this,200) } } //獲取樣式 function getStyle(obj,name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj,false)[name]; } } function starMove(obj,iTarget) { clearInterval(obj.timer); obj.timer=setInterval(function(){ //獲取樣式值 var cur = parseInt(getStyle(obj,"width")); var speed= (iTarget-cur)/4; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(Math.abs(iTarget-cur)<4) { clearInterval(obj.timer); obj.style.width=iTarget+"px"; } else { obj.style.width=cur+speed+"px"; } },30); }