<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #img1{filter:alpha(opacity:30);/*filter是给IE用到*/opacity:.3; width:300px;} </style> </head> <body> <img src="../1.jpg" alt="" id="img1"> </body> </html> <script type="text/javascript"> window.onload = function () { var oImg = document.getElementById("img1"); oImg.onmouseover = function () { startMove(100); } oImg.onmouseout = function () { startMove(30); } } var timer = null; var alpha = 30; function startMove(iTarget) {//通过目标点来计算速度 var oImg = document.getElementById("img1"); clearInterval(timer); timer = setInterval(function () { var iSpeed = 0; if(alpha<iTarget){ iSpeed = 10; }else{ iSpeed = -10; } if(alpha ==iTarget){ clearInterval(timer) }else{ alpha+=iSpeed; document.title = alpha; oImg.style.filter = "alpha(opacity:"+alpha+")"; oImg.style.opacity = alpha/100; } },30) } </script>