【js运动学习】淡入淡出

来源：互联网发布：黑帽seo检测编辑：程序博客网时间：2024/05/23 20:52

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课

0 0