运动框架的回调函数不能达到设定的值<!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>
1 回答
李晓健
TA贡献1036条经验 获得超461个赞
function getStyle(obj, attr) {
console.log(obj.getComputedStyle);
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
//这行写借了
return getComputedStyle(obj, null)[attr];
}
}看注释
添加回答
举报
0/150
提交
取消