JS透明度动画教程-优快云博客

本文链接：https://blog.youkuaiyun.com/f1024042400/article/details/53908800

1.写一个class

#div1 {width: 200px;height:200px;background: red;  filter:alpha(opacity:30);opacity: 0.3;}

2.给这个div加俩个事件

    <script>
        window.onload=function(){
            var oDiv = document.getElementById('div1');

            oDiv.onmouseover=function(){
                startMove(100);
            };
            oDiv.onmouseout=function(){
                startMove(30);
            };
        }
    </script>

3.建立定时任务,删除定时任务. 注意删除操作.

        var alpha = 30;
        var timer = null;
        function startMove(iTarget){
            var oDiv = document.getElementById('div1');
            clearInterval(timer);
            timer = setInterval(function(){
                var speed = alpha < iTarget ? 10 : -10;

                if(alpha == iTarget){
                    clearInterval(timer);
                }else{
                    alpha +=speed;
                    oDiv.style.opacity=alpha / 100;
                }

            },50);
        };

4.完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 {width: 200px;height:200px;background: red;  filter:alpha(opacity:30);opacity: 0.3;}
    </style>
    <script>
        window.onload=function(){
            var oDiv = document.getElementById('div1');

            oDiv.onmouseover=function(){
                startMove(100);
            };
            oDiv.onmouseout=function(){
                startMove(30);
            };
        };

        var alpha = 30;
        var timer = null;
        function startMove(iTarget){
            var oDiv = document.getElementById('div1');
            clearInterval(timer);
            timer = setInterval(function(){
                var speed = alpha < iTarget ? 10 : -10;

                if(alpha == iTarget){
                    clearInterval(timer);
                }else{
                    alpha +=speed;
                    oDiv.style.opacity=alpha / 100;
                }

            },50);
        };
    </script>
</head>
<body>
<div class="div" id="div1"></div>
</body>
</html>

参考智能社js课程. http://bbs.zhinengshe.com/forum.php?mod=forumdisplay&fid=36&filter=typeid&typeid=37 第15课