前面展示了多物体的运动形式，但很常见的针对透明度没有考虑在内，透明度的展示用上述运动框架展示时，需要特别考虑一下，因为透明度是数值，并且有多个值，下面就见要探讨一下这个怎么展现出来：
<!DOCTYPE html>
<html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> div { width: 100px;height: 50px;background: red;margin-top: 30px; border: 3px solid black; font-size: 14px;} </style> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementsByTagName('div'); var i=0; for(i=0;i<oDiv.length;i++){ oDiv[i].timer = null; //设置多个定时器，给定时器一个索引值 oDiv[i].onmouseover = function(){ setMove(this,'opacity',100); //为当前的div加上样式 } oDiv[i].onmouseout = function(){ setMove(this,'opacity',30); } } }; //获取div的宽度，代替offsetWidth,这样边框就不会有影响 function getStyle(obj,arr){ //两个参数，第一个是获取谁的，第二个时什么样式 if(obj.currentStyle){ return obj.currentStyle[arr]; }else{ return getComputedStyle(obj,false)[arr]; //里面有两个参数，第一个是获取谁的，第二个参数不为空就行，后面是获取样式 } }function setMove(obj,arr,iTarget){ //设置多个参数,第二个参数为要改变的样式
var timer = null; clearInterval(obj.timer); //关闭当前的定时器 obj.timer = setInterval(function(){ //为当前div设置定时器 var iCurr=0; if(arr=='opacity'){ //parseFloat()取浮点数 var iCurr = parseInt(parseFloat(getStyle(obj,arr))*100); //透明度单独处理，将小数转换成整数 }else{ var iCurr = parseInt(getStyle(obj,arr)); //这里就是获取的当前div的宽度 } var iSpeed = (iTarget-iCurr)/15; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //将当前的速度转化成整型值 //Math.ceil向上取整，Math.floor向下取整 if(iCurr==iTarget){ clearInterval(obj.timer); //清除当前div的定时器 }else{ if(arr=='opacity'){ //透明度单独处理，就可以适应多物体运动框架 obj.style.fliter = 'alpha(:'+(iCurr+iSpeed)+')'; //这里是用整数表示 obj.style.opacity = (iCurr+iSpeed)/100; //这里使用小数表示 } obj.style[arr]= iCurr+iSpeed+'px'; //将div的宽以一定速度增加 } },30); } </script></head><body> <div></div> <div></div> <div>asdf</div></body></html>