你的位置:首页 > Java教程

[Java教程]实现基本的图片淡入淡出的效果


<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <title>Document</title>    <style>      #img1 {        filter: alpha(opacity:20);        opacity: 0.2;      }    </style>    <script>      window.onload = function(){        var oImg = document.getElementById('img1');        oImg.onmouseover = function(){          startMove(100);        }        oImg.onmouseout = function(){          startMove(20);        }      }      var alpha = 20;      var timer = null;      function startMove(iTarget){        var oImg = document.getElementById('img1');        var iSpeed = 0;        clearInterval(timer);        timer = setInterval(function(){          if (alpha < iTarget) {            iSpeed = 2;          } else {            iSpeed = -2;          }          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="images/bg_agency_banner.jpg" height="339" width="1360"/>  </body></html>