慕课网javascript动画特效多透明度源代码

dididan5079

于 2017-06-11 19:45:00 发布

阅读量122

点赞数

原文链接：http://www.cnblogs.com/milkytea/p/6986143.html

版权

慕课网javascript动画特效 多透明度 源代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多物体运动</title>
    <style>

       div{
            width:200px;
            height:100px;
            background:yellow;
            margin-bottom: 20px;
            filter:alpha(opacity:0.3);
            opacity:0.3;
        }
    </style>
    <script>
        window.οnlοad=function(){
            var ali=document.getElementsByTagName('div');
            for(var i=0;i<ali.length;i++){
                ali[i].alpha=30;
                ali[i].timer=null
                ali[i].οnmοuseοver=function(){
                    startMove(this,100);
                }
                ali[i].οnmοuseοut=function(){
                    startMove(this,30);
                }
            }
        }
        //  var timer=null;
    //    var alpha=30;
       // ali[i].alpha=30;
        function startMove(obj,iTarget){
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                var speed=0;
                if(obj.alpha>iTarget){
                    speed=-10;
                }else{
                    speed=10;
                }if(obj.alpha==iTarget){
                    clearInterval(obj.timer);
                }
               else{
                    obj.alpha+=speed;
                    obj.style.filter='alpha(opacity:'+obj.alpha+')';
                    obj.style.opacity=obj.alpha/100;
                }
            },30)
        }
    </script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
慕课网地址http://www.imooc.com/video/2880