js-同期モーションjsonで
4218 ワード
このセクションでは、前節で述べたバグについて、処理します.
このバグが存在するのは,属性値が1つで目標値に達するとタイマがクリアされるため,我々が変更するのはタイマの一部をクリアすることである.次の修正を見て
このバグが存在するのは,属性値が1つで目標値に達するとタイマがクリアされるため,我々が変更するのはタイマの一部をクリアすることである.次の修正を見て
var timer;
window.onload=function(){
var div=document.getElementById("div1");
div.onmouseover=function(){
startMove(div,{width:210,height:400,opacity:100});
}
div.onmouseout=function(){
startMove(div,{width:200,height:200,opacity:30})
}
}
function startMove(obj,json,fn){
clearInterval(timer);
var index=0;
timer=setInterval(function(){
for(var attr in json){
var icur;
if(attr=="opacity"){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
icur=parseInt(getStyle(obj,attr))
}
var speed=(json[attr]-icur)/8;
speed=speed>0? Math.ceil(speed):Math.floor(speed);
if(icur!=json[attr]){
index=1;// ，index=0， 。
if(fn){
fn();
}
}else {
index=0;
}
if(index==1){
if(attr=="opacity"){
obj.style.opacity=(icur+speed)/100;
obj.style.filter="alpha(opacity"+(icur+speed)+")";
}
obj.style[attr]=parseInt(getStyle(obj,attr))+speed+"px";
}
}
},50)
if(index=0){
clearInterval(timer);
}
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else if(getComputedStyle){
return getComputedStyle(obj,false)[attr];
}
}