Js运动动画系列2--透明度动画

来源：互联网发布：李淼知乎编辑：程序博客网时间：2024/04/30 05:51

<head>    <title>透明度动画</title>    <style type="text/css">        *        {            margin: 0;            padding: 0;        }        #div1        {            width: 200px;            height: 200px;            background: red;            filter:alpha(opacity:30);            opacity:0.3;            cursor: pointer;        }    </style> </head><body>    <div id="div1">    </div></body></html>

<script type="text/javascript">        window.onload = function () {            var oDiv = document.getElementById('div1');            oDiv.onmousemove = function () {                startChange(100);            }            oDiv.onmouseout = function () {                startChange(30);            }        }        var timer = null;        var alpha=30;        function startChange(iTarget) {            var oDiv = document.getElementById('div1');            clearInterval(timer);            timer = setInterval(function () {                var speed = 0;                if (alpha > iTarget) {                    speed = -10;                } else {                    speed = 10;                }                if (alpha == iTarget) {                    clearInterval(timer);                } else {                    alpha += speed                    oDiv.style.filter='alpha(opacity:'+alpha+')';                    oDiv.style.opacity=alpha/100;                }            }, 30);        }    </script>

0 0