JS运动特效之任意值添加运动的示例分析-创新互联
这篇文章主要介绍JS运动特效之任意值添加运动的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
具体如下：
回顾一下上个例子JS实现多物体运动的方法：
如果此时需求有变化，让第2个li鼠标移入，高度变化，第三个li鼠标依然边框，第四个li鼠标移入背景变化。一种办法就是复制几分startMove函数，分别把之前width变化改成height，borderWidht，和opacity透明度变化；但是这样显然浪费，可以把他们合并成一个函数，把变化的属性作为参数传进去就好了.
1. function startMove(obj,attr,iTarget) 函数里新增attr参数
2. 调用参数的方式：由obj.style.属性名 变成 obj.style[属性名]
3. 需要分别为每个li添加事件
运行一下发现，改变宽，高，border都妥妥的，但是最后一个改变“透明度”没反应，是什么问题那？？
首先opacity的值0.3一个小数，parseInt(getStyle(obj,attr)之后便变成0，还有大的一个问题就是最后属性值设置的时候：obj.style[attr] = objAttr+iSpeed+'px'; 显然opacity并没有px这个单位，所以需要对运动框架做进一步处理
需要判断一下，当接受的参数是“透明度”的时候，需要单独处理一下，把上面出问题的两个地方做一下处理
var objAttr = 0;
if(attr == "opacity"){
// 由于计算机对 小数的处理有问题，这里用Math.round处理一下
// objAttr = parseFloat(getStyle(obj,attr)*100);
//objAttr = parseInt(parseFloat(getStyle(obj,attr))*100);
objAttr = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
objAttr = parseInt(getStyle(obj,attr));
}如果不做处理直接 objAttr = parseFloat(getStyle(obj,attr)*100); 由于计算机不能很精确的处理小数，会导致一些问题
用parseInt这种方法：objAttr = parseInt(parseFloat(getStyle(obj,attr))*100); 也可以处理小数，但是经过测试在鼠标移出的时候，与原来状态有一点偏差
可以看出，当鼠标移出去的时候，opacity应该回到1，可结果却是0.94 ；所以个人推荐用Math.round四舍五入函数来处理这里的小数问题
做一下判断，下面也同样做判断
if(attr == "opacity"){
obj.style.filter = 'alpha(opacity:'+(objAttr+iSpeed)+')';
obj.style.opacity = (objAttr+iSpeed)/100;
}else{
//obj.style.width = objWidth+iSpeed+'px';
obj.style[attr] = objAttr+iSpeed+'px';// 需要又.属性名的形式改成[]
}完整代码：
HTML部分
css部分：
js部分
最后结果演示：
以上是“JS运动特效之任意值添加运动的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
新闻标题：JS运动特效之任意值添加运动的示例分析-创新互联
路径分享：http://6mz.cn/article/dojsho.html