<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>多物体透明度动画</title> <style type="text/css"> body,div{ margin: 0px; padding: 0px; } div{ width: 200px; height: 200px; background: red; margin: 10px; float: left; filter:alpha(opacity:30); opacity:0.3; } </style> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementsByTagName('div'); for(var i=0;i<oDiv.length;i++){ oDiv[i].timer = null; oDiv[i].alpha = 30; oDiv[i].onmouseover = function(){ startMove(this,100); } oDiv[i].onmouseout = function(){ startMove(this,30); } } } //var alpha = 30; function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = 0; if(iTarget > obj.alpha){ speed = 10; } else{ speed = -10; } if(iTarget == obj.alpha){ clearInterval(obj.timer); } else{ obj.alpha +=speed; obj.style.filter = 'obj.alpha(opacity:'+obj.alpha+')'; obj.style.opacity = obj.alpha/100; } },30) } </script> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>
和之前的timer一样，alpha = 30;也需要写在for循环的后面。
到这里，简单的动画效果就告一段落了，慢慢的一步一步的去修改去尝试就会有新的发现。