运动框架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 200px; height: 200px; background: red; filter:alpha(opacity:30); opacity: 0.3; margin:20px; float:left; } </style> <script type="text/javascript">
//框架调用 window.onload = function(){ var Odiv = document.getElementsByTagName('div'); for(var i = 0;i<Odiv.length;i++){ Odiv[i].alpha = 30; Odiv[i].onmouseover = function(){ starMove(this,100); }; Odiv[i].onmouseout = function(){ starMove(this,30); } } }
//框架定义 function starMove(obj,iTarget) { clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = (iTarget - obj.alpha)/6; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(obj.alpha == iTarget){ clearInterval(obj.timer); }; else{ obj.alpha += speed; obj.style.filter = 'alpha(opcity:'+obj.alpha+')'; obj.style.opacity = obj.alpha/100; }; },30); } </script> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>