JS實(shí)現(xiàn)的透明度漸變動(dòng)畫(huà)效果示例

2019-11-19 13:56:16

字體：大中小

供稿：網(wǎng)友

本文實(shí)例講述了JS實(shí)現(xiàn)的透明度漸變動(dòng)畫(huà)效果。分享給大家供大家參考，具體如下：

<!DOCTYPE html><html>  <head>  <meta charset="utf-8">    <title>m.survivalescaperooms.com JS透明度變化效果</title>    <style>    body{      margin: 0px;      padding: 0px;    }    .redb{      width:200px;      height: 200px;      background: red;      filter:alpha(opacity=30);      opacity: 0.3;    }    </style>  </head>  <body>    <div class="redb" id="opbtn"></div>    <script>    window.onload = function(){      var opDiv = document.getElementById("opbtn");      opDiv.onmouseover = function(){        startMove(100);      }      opDiv.onmouseout = function(){        startMove(30);      }    }    var timer = null;    var alpha = 30;    var speed = 0;    function startMove(opTarget){      clearInterval(timer);      var opDiv = document.getElementById("opbtn");      timer = setInterval(function(){        if(alpha<opTarget){          speed = 10;        }        else if(alpha>opTarget){          speed = -10;        }        if(alpha==opTarget){          clearInterval(timer);        }        else{          alpha += speed;          opDiv.style.opacity = alpha/100;          opDiv.style.filter = 'alpha(opacity='+alpha+')';        }      },100);    }    </script>  </body></html>

運(yùn)行效果：

小結(jié):

1、filter和opacity區(qū)別：w3c標(biāo)準(zhǔn)透明度就是opacity,filter只有IE才能用,其他瀏覽器都支持opacity
2、改變透明度時(shí)候，不能通過(guò)類似offsetLeft的方法獲取透明度值，因此需要單獨(dú)創(chuàng)建變量
3、不要忘記將定時(shí)器賦值給timer

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

上一篇：在vscode里使用.vue代碼模板的方法

下一篇：JS實(shí)現(xiàn)的簡(jiǎn)單折疊展開(kāi)動(dòng)畫(huà)效果示例