上栗子
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>透明度变化动画</title> <style> *{margin: 0;padding: 0;} #div{ position: relative; top: 0; width: 200px; height: 200px; background: orange; filter:alpha(opacity:30); opacity: .3; } </style> </head> <body> <div id="div"></div> <script> window.onload = function(){ var oDiv = document.getElementById('div'); oDiv.onmouseover = function(){ startMove(100); } oDiv.onmouseout = function(){ startMove(30); } var timer; var alpha=30; var speed; function startMove(tag){ clearInterval(timer); timer = setInterval(function(){ if(alpha > tag){ speed = -10; }else{ speed = 10; } if(alpha == tag){ clearInterval(timer); }else{ alpha += speed; oDiv.style.filter = 'alpha(opacity:'+alpha+')'; oDiv.style.opacity = alpha/100; } },30) } } </script> </body> </html>