JS实现的透明度渐变动画效果示例

2019-11-19 13:56:16

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS实现的透明度渐变动画效果。分享给大家供大家参考，具体如下：

<!DOCTYPE html><html>  <head>  <meta charset="utf-8">    <title>www.VeVB.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>

运行效果：