图片的淡入淡出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #img1 { filter: alpha(opacity: 30); opacity: 0.3; } </style> <script> window.onload = function() { var oImg = document.getElementById('img1'); oImg.onmouseover = function() { startMove(100); } oImg.onmouseout = function() { startMove(30); } } var timer = null; var alpha = 30; var iTarget = null; 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; oImg.style.filter = 'alpha(opacity:' + alpha + ')'; oImg.style.opacity = alpha / 100; } }, 30) } </script> </head> <body> <img id="img1" src="bg.jpg" alt="" width="800px"> </body> </html>