JS运动特效之任意值添加运动的方法分析

本文实例讲述了JS运动特效之任意值添加运动的方法。分享给大家供大家参考，具体如下：

回顾一下上个例子：

window.onload = function(){ var liTags = document.getElementsByTagName('li'); for(var i=0;i0 ?Math.ceil(iSpeed):Math.floor(iSpeed); if(objWidth == iTarget){ clearInterval(obj.timer); }else{ obj.style.width = objWidth+iSpeed+'px'; } },30); }

如果此时需求有变化，让第2个li鼠标移入，高度变化，第三个li鼠标依然边框，第四个li鼠标移入背景变化。一种办法就是复制几分startMove函数，分别把之前width变化改成height，borderWidht，和opacity透明度变化；但是这样显然浪费，可以把他们

合并成一个函数，把变化的属性作为参数传进去

就好了.

window.onload = function(){ var liTags = document.getElementsByTagName('li'); for(var i=0;i0 ?Math.ceil(iSpeed):Math.floor(iSpeed); if(objAttr == iTarget){ clearInterval(obj.timer); }else{ //obj.style.width = objWidth+iSpeed+'px'; obj.style[attr] = objAttr+iSpeed+'px';// 需要又.属性名的形式改成[] } },30); }

运行一下发现，改变宽，高，border都妥妥的，但是最后一个改变“透明度”没反应，是什么问题那？？

首先opacity的值0.3一个小数，parseInt(getStyle(obj,attr)之后便变成0，还有最大的一个问题就是最后属性值设置的时候：obj.style[attr] = objAttr+iSpeed+'px'; 显然opacity并没有px这个单位，所以需要对运动框架做进一步处理