javascript动画效果——多物体运动

1.存在多个引用同一个值的时候,而且这个值会经常变化的时候,最好单独赋值,避免出现争用的情况

<script type="text/javascript">
        window.onload = function(){
            var aLi = document.getElementsByTagName('li');
            for(var i=0;i<aLi.length;i++){
                aLi[i].timer =null;//给每一个timer添加null,才不会使他们都去争着使用
                aLi[i].onmouseover = function(){
                    startMove(this,400);
                }
                aLi[i].onmouseout = function(){
                    startMove(this,200);
                }
            }
        }
        var timer = null;
        var alpha = 30;
        function startMove(obj,iTarget){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var speed = (iTarget-obj.offsetWidth)/8;
                speed =speed>0?Math.ceil(speed):Math.floor(speed);
                if(obj.offsetWidth==iTarget){
                    clearInterval(obj.timer);
                }
                else{
                    obj.style.width = obj.offsetWidth+speed+'px';
                }
            },30)
        }
    </script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容