原生的JS编写图片的淡入淡出

原生的JS写图片的淡入淡出代码量比较多，他不像jQuery。

淡入淡出其实就是鼠标移入图片的时候透明度值的变化。

这里需要用到两个时间：

mouseover()和mouseout()

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       #img1{
           filter: alpha(opacity = 30);
           opacity: 0.3;
       }
    </style>
</head>
<body>
    <script>
        
          window.onload = function(){

              var oimg = document.getElementById("img1");
              oimg.onmouseover = function(){
                  //鼠标移入，透明度为100
                  startMove(100);
              }
              oimg.onmouseout = function(){
                  //alert("a");
                  //鼠标移出，回复原始值
                  startMove(30);
              }


          }; 
          var timer = null;
          //刚开始的透明度为30
          var alpha = 30;
          function startMove( iTarget ){
            var oimg = document.getElementById("img1");
            //再开定时器之前，先清除定时器
            clearInterval( timer );
            timer = setInterval( function(){
                //定义初速度为0
                var iSpeed = 0;
                if( alpha < iTarget )  //如果初始的透明度小于目标的透明度，速度加1
                {
                    iSpeed = 1;
                }
                else
                {
                    iSpeed =-1;
                }
                if( alpha == iTarget ){
                    clearInterval( timer );
                }
                else{
                    alpha += iSpeed;
                    //IE浏览器的
                    oimg.style.filter = "alpha(opacity:"+alpha+")";
                    //谷歌，火狐
                    oimg.style.opacity = alpha/100;
                    //document.title = alpha;
                }
            }, 30);
          }

    </script>
    <img id="img1" src="Desert.jpg" alt="淡入淡出">
</body>
</html>

需要注意的是，透明度有兼容性问题。

 filter: alpha(opacity = 30); IE浏览器
 opacity: 0.3;                 主流浏览器

原生的JS编写图片的淡入淡出

猜你喜欢