運動框架的回調函數不能達到設定的值<!DOCTYPE html><html><head><meta charset="UTF-8"><title>連接運動</title><style type="text/css">li{height:100px;width: 300px;background: yellow;margin:20px;list-style: none;filter:alpha(opacity:30);opacity:0.3;border:4px solid red}</style><script type="text/javascript">//運動框架function startMove(obj,json,fn){clearInterval(obj.timer);//清除上一個沒有結束的運動，不會影響其他的obj.timer = setInterval(function(){for(var attr in json){var flag = true;//來判斷是不是所有運動都到達了終點//假設所有運動都到了目標值var getstyle = 0;if(attr == 'opacity'){getstyle =Math.round(parseFloat(getStyle(obj,attr))*100);//因為計算機對小數的識別不好所以要四舍五入；}else{getstyle = parseInt(getStyle(obj,attr));}var speed = (json[attr]-getstyle)/10;//3.offsetWidth屬性返回值是整數，而style.width的返回值是字符串。//加了border等css屬性后offsetWidth就不能用了會有錯誤，所以用自己封裝的getStyle函數獲得css屬性值speed = speed>0?Math.ceil(speed):Math.floor(speed);if(getstyle!=json[attr]){flag = false;}if(attr =='opacity' ){obj.style['opacity']= (getstyle+speed)/100;obj.style['fliter']='alpha(opacity:'+(getstyle+speed)+')'}else{obj.style[attr]= getstyle+speed+"px";//2.offsetWidth屬性僅是可讀屬性，而style.width是可讀寫的。}if(flag){clearInterval(obj.timer);if(fn){fn();}}}},30);}function getStyle(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];//ie}else{return obj.getComputedStyle(obj,null)[attr];}}window.onload = function(){var oli = document.getElementsByTagName('li');for(var i = 0 ;i<oli.length;i++){oli[i].timer = null;oli[i].onmouseover = function(){var that = this;startMove(that,{width:600,height:600,opacity:100},function(){startMove(that,{width:300,height:100,opacity:30});});}oli[i].onmouseout = function(){var that = this;startMove(that,{width:400,height:400,opacity:50});}};}?</script></head><body><ul><li id="li">利用json達到同時運動</li><li id="li">利用json達到同時運動</li><li id="li">利用json達到同時運動</li><li id="li">利用json達到同時運動</li></ul></body></html>
?運動框架的回調函數不能達到設定的值
jetbbb
2016-01-13 12:05:12
