javascriptアニメーション効果——多物体運動
1143 ワード
1.同じ値を複数引用している場合、しかもこの値が常に変化する場合は、単独で値を賦課し、争いが起こらないようにするのが良いです.
window.onload = function(){
var aLi = document.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
aLi[i].timer =null;// timer null,
aLi[i].onmouseover = function(){
startMove(this,400);
}
aLi[i].onmouseout = function(){
startMove(this,200);
}
}
}
var timer = null;
var alpha = 30;
function startMove(obj,iTarget){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (iTarget-obj.offsetWidth)/8;
speed =speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth==iTarget){
clearInterval(obj.timer);
}
else{
obj.style.width = obj.offsetWidth+speed+'px';
}
},30)
}