多物体运动与淡入淡出_运动物体淡入淡出-优快云博客

本文介绍了一种使用JavaScript实现多物体运动和淡入淡出效果的方法，通过为每个元素分配独立的定时器，确保了动画的平滑过渡和精确控制。

1、多物体运动
在这里插入图片描述

var aDivs = document.getElementsByTagName("div");
            //遍历每一个，给每一个绑定事件
            for(var i=0;i<aDivs.length;i++){
                aDivs[i].onmouseover = function(){
                    starMove(this,300);
                }
                aDivs[i].onmouseout = function(){
                    starMove(this,100);
                }

            }

            /*
               让谁进行运动不确定，node参数
               多物体运动，实际上只有一个定时器，
               让每一个运动的物体都有一个定时器
            */
            // var timer = null;
            function starMove(node,iTarget){
                clearInterval(node.timer);
                node.timer = setInterval(function(){
                    var speed = (iTarget - node.offsetWidth) / 8 ;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    if(iTarget == node.offsetWidth){
                        clearInterval(node.timer);
                    }else{
                        node.style.width = node.offsetWidth + speed + "px";
                    }
                },30);

            }

2、多物体淡入淡出
在这里插入图片描述

var aDivs = document.getElementsByTagName("div");
            for(var i=0;i<aDivs.length;i++){
                aDivs[i].alpha = 30;
                aDivs[i].onmouseover = function(){
                    starMove(this,100);
                }
                aDivs[i].onmouseout = function(){
                    starMove(this,30);
                }

            }
            /*
               多物体运动
               1、定时器不能共用
               2、任何数据都不能共用
            */
            // var alpha = 30;
            function starMove(node,iTarget){
                clearInterval(node.timer);
                node.timer = setInterval(function(){
                    var speed = (iTarget - node.alpha) / 30;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    if(iTarget == node.alpha){
                        clearInterval(node.timer);
                    }else{
                        node.alpha += speed;
                        node.style.opacity = node.alpha / 100;
                        node.style.filter = "alpha(opacity=" + node.alpha +")"

                    }
                },30);
            }