<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 100px; height: 100px; background: red; margin: 10px; filter: alpha(30); opacity: 0.3; } </style> <script> window.onload = function() { var aDiv = document.getElementsByTagName(‘div‘); var i = 0; for (i = 0; i < aDiv.length; i++) { aDiv[i].alpha = 30; aDiv[i].onmouseover = function() { startMove(this, 100); } aDiv[i].onmouseout = function() { startMove(this, 30); } } } // var alpha = 30; function startMove(obj, iTarget) { //多物体运动所有东西都不能共用 clearInterval(obj.timer); obj.timer = setInterval(function() { var iSpeed = (iTarget - obj.alpha) / 8; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if (obj.alpha == iTarget) { clearInterval(obj.timer); } else { obj.alpha += iSpeed; obj.style.filter = ‘alpha(opacity:‘ + obj.alpha + ‘)‘; obj.style.opacity = obj.alpha / 100; } }, 30) } </script> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>
原文:http://www.cnblogs.com/Mr-W/p/6406985.html