两个变量的位置问题

来源:2-2 JS透明度动画

街角疯

2017-06-08 09:52

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

在这个代码中如果我将 var alpha=30;  var timer=null;这两句放入在starMove()函数中,就不能实现课程中的效果,为什么?只能这样写吗?

写回答 关注

2回答

  • qq_等风来_55
    2017-06-08 18:47:56
    已采纳

    因为每一次的循环调用都初始化了它的值  使其无法叠加

    街角疯

    非常感谢!

    2017-06-13 21:55:12

    共 1 条回复 >

  • chaselss3308641
    2017-06-08 16:20:45

    因为每次执行starMove()函数时 var alpha=30;  var timer=null  都是初始值,导致之前执行后的数值无法使用,就像运行一次。 var alpha=40,当你写在函数里面 var alpha=30,导致 var alpha=30而不是40

JS动画效果

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

113925 学习 · 1443 问题

查看课程

相似问题