实现效果：当数遍移动到图片上时。图片发生渐变效果；当鼠标离开时，恢复原图效果。
解答：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>透明度动画</title> <style type="text/css"> *{ margin:0; padding:0; } #div1{ width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3; } </style> <script> window.onload = function(){ var odiv = document.getelementbyid('div1'); odiv.onmouseover = function(){ startmove(100); } odiv.onmouseout = function(){ startmove(30); } } var timer = null; var alpha = 30; function startmove(itarget){ var odiv = document.getelementbyid('div1'); clearinterval(timer); timer = setinterval(function(){ var speed = 0; if(alpha > itarget){ speed = -10; }else{ speed = 10; } if(alpha == itarget){ clearinterval(timer); }else{ alpha = alpha + speed; odiv.style.filter = 'alpha(opacity:'+alpha+')'; odiv.style.opacity = alpha/100; } },30) } </script> </head> <body> <div id="div1"></div> </body> </html>
以上就是前端实践--javascript--动画（二）的内容。