javascript动画效果之透明度

时间：2022-05-13 20:18:01

在css中的filter对应老版本的ie浏览器，opacity对应的是其他浏览器

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         * {

             margin: 0;

             padding: 0;

             font-size: 12px;

         }

         div {

             width: 200px;

             height: 200px;

             background: green;

             filter: alpha(opacity: 30);

             opacity: 0.3;

         }

     </style>

 </head>

 <body>

     <div id="div">

     </div>

 </body>

 </html>

js中需要在开始自增和开始自减前清除定时器，否则当鼠标多次移动，则会无限叠加自增和自减

 <script>

         function $(id) {

             return typeof id === "string" ? document.getElementById(id) : id;

         }

         window.onload = function() {

             //自定义变量div

             var div = $("div");

             //定义一个定时器timer

             var timer = null;

             //定义一个变量用于透明度自增减

             var alpha = 30;

             //定义一个鼠标移进的事件

             div.onmouseenter = start;

             //定义一个函数

             function start() {

                 //当鼠标移动次数过多，会叠加自增，所以需要在开始时，清除定时器

                 clearInterval(timer);

                 //定时器用于自动增加

                 timer = setInterval(show, 30);

             }

             //自定义函数用于透明度的自动增加

             function show() {

                 if (alpha < 100) {

                     alpha += 10;

                     //ie浏览器

                     div.style.filter = 'alpha(opacity: ' + alpha + ');'

                         //其他浏览器

                     div.style.opacity = alpha / 100;

                 }

             }

             //定义一个鼠标移出事件

             div.onmouseleave = back;

             //定义一个函数

             function back() {

                 //当鼠标移动次数过多，会叠加自减，所以需要在开始时，清除定时器

                 clearInterval(timer);

                 //定时器用于自动减少

                 timer = setInterval(clear, 30);

             }

             //自定义函数用于透明度的自动减少

             function clear() {

                 if (alpha > 30) {

                     alpha -= 10;

                     //ie浏览器

                     div.style.filter = 'alpha(opacity: ' + alpha + ');'

                         //其他浏览器

                     div.style.opacity = alpha / 100;

                 }

             }

         }

     </script>

相关文章