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

深藏阁楼爱情的钟 2022-06-07 09:19 195阅读 0赞

原生的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; 主流浏览器