本文实例讲述了JS运动特效之任意值添加运动的方法。分享给大家供大家参考，具体如下：
回顾一下上个例子JS实现多物体运动的方法：
<script> window.onload = function(){ var liTags = document.getElementsByTagName('li'); for(var i=0;i<liTags.length;i++){ liTags[i].timer = null;// 给每个li都添加一个timer liTags[i].onmouseover = function () { startMove(this,400); } liTags[i].onmouseout = function () { startMove(this,200); } } } function getStyle(obj,attr){ return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr]; } function startMove(obj,iTarget) { clearInterval(obj.timer); obj.timer = setInterval(function () { var objWidth = parseInt(getStyle(obj,'width'));//因为是通过[]调用属性，所以width必须加单引号 // var iSpeed = (iTarget -obj.offsetWidth)/10; // 因为objWidth存放的就是当前对象的宽，所以直接写objWidth而不是obj.objWidth var iSpeed = (iTarget -objWidth)/10; iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed); if(objWidth == iTarget){ clearInterval(obj.timer); }else{ obj.style.width = objWidth+iSpeed+'px'; } },30); }</script>如果此时需求有变化，让第2个li鼠标移入，高度变化，第三个li鼠标依然边框，第四个li鼠标移入背景变化。一种办法就是复制几分startMove函数，分别把之前width变化改成height，borderWidht，和opacity透明度变化；但是这样显然浪费，可以把他们合并成一个函数，把变化的属性作为参数传进去就好了.
1. function startMove(obj,attr,iTarget) 函数里新增attr参数
2. 调用参数的方式：由obj.style.属性名 变成 obj.style[属性名]
3. 需要分别为每个li添加事件
<script> window.onload = function(){ var liTags = document.getElementsByTagName('li'); for(var i=0;i<liTags.length;i++){ liTags[i].timer = null;// 给每个li都添加一个timer liTags[0].onmouseover = function () { startMove(this,'width',400); } liTags[0].onmouseout = function () { startMove(this,'width',200); } liTags[1].onmouseover = function () { startMove(this,'height',100); } liTags[1].onmouseout = function () { startMove(this,'height',50); } liTags[2].onmouseover = function () { startMove(this,'borderWidth',10); } liTags[2].onmouseout = function () { startMove(this,'borderWidth',2); } liTags[3].onmouseover = function () { startMove(this,'padding',10); } liTags[3].onmouseout = function () { startMove(this,'padding',0); } } } function getStyle(obj,attr){ return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr]; } function startMove(obj,attr,iTarget) {//attr：把变化的属性最为参数传入 clearInterval(obj.timer); obj.timer = setInterval(function () { var objAttr = parseInt(getStyle(obj,attr)); var iSpeed = (iTarget -objAttr)/10; iSpeed = iSpeed>0 ?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); }</script>运行一下发现，改变宽，高，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部分
<body><ul> <li></li> <li></li> <li></li> <li></li></ul></body>
css部分：
<style> ul{list-style: none;} ul li{ margin: 10px; width: 200px;height: 50px; border: 2px solid #c00; background: lightblue; }</style>js部分
<script> window.onload = function(){ var liTags = document.getElementsByTagName('li'); for(var i=0;i<liTags.length;i++){ liTags[i].timer = null;// 给每个li都添加一个timer liTags[0].onmouseover = function () { startMove(this,'width',400); } liTags[0].onmouseout = function () { startMove(this,'width',200); } liTags[1].onmouseover = function () { startMove(this,'height',100); } liTags[1].onmouseout = function () { startMove(this,'height',50); } liTags[2].onmouseover = function () { startMove(this,'borderWidth',10); } liTags[2].onmouseout = function () { startMove(this,'borderWidth',2); } liTags[3].onmouseover = function () { startMove(this,'opacity',30); } liTags[3].onmouseout = function () { startMove(this,'opacity',100); } } } function getStyle(obj,attr){ return getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr]; } function startMove(obj,attr,iTarget) {//attr：把变化的属性最为参数传入 clearInterval(obj.timer); obj.timer = setInterval(function () { var objAttr = 0; if(attr == "opacity"){ // 由于计算机对 小数的处理有问题，这里用parseFloat转一下 objAttr = Math.round(parseFloat(getStyle(obj,attr))*100); }else{ objAttr = parseInt(getStyle(obj,attr)); } var iSpeed = (iTarget -objAttr)/10; iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed); if(objAttr == iTarget){ clearInterval(obj.timer); }else{ 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'; } } },30); }</script>最后结果演示：
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
新闻热点
疑难解答
