js多物体运动

最新推荐文章于 2021-06-18 11:47:06 发布

Alex十年

最新推荐文章于 2021-06-18 11:47:06 发布

阅读量234

点赞数

分类专栏： JavaScript知识总结

本文链接：https://blog.csdn.net/ilikejj0/article/details/79589890

版权

JavaScript知识总结专栏收录该内容

22 篇文章 0 订阅

订阅专栏

经验：在多物体运动里面，所有开始定义为常量的值，都不能通用，比如第一个案例中的定时器，还有就是多物体淡入淡出时的透明度值。一旦通用就会产生混乱。属性要与对应的运动对象进行绑定

多物体运动：此时需要注意的是，相对于之前的案例，如果只有一个定时器，会出现当你快速移动鼠标时，
第一个物体，还没有还原完，定时器就已经被关闭，而出现没有回答最开始的宽度的情况
所以此时用的是，使用多个定时器，反正不要钱，即给每一个都加上一个定时器
记住此时这个开的定时器也要是用obj来限定是开的哪一个定时器，然后好让关的时候是对应的定时器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>多个div同时变宽运动</title>
        <style>
            div{width: 100px;height: 50px;background: orangered;margin: 10px;}
        </style>
        <script>
            //此时需要注意的是，相对于之前的案例，如果只有一个定时器，会出现当你快速移动鼠标时，
            //第一个物体，还没有还原完，定时器就已经被关闭，而出现没有回答最开始的宽度的情况
            //所以此时用的是，使用多个定时器，反正不要钱，即给每一个都加上一个定时器
            window.onload=function(){
                var oDiv = document.getElementsByTagName('div');
                for(var i=0;i<oDiv.length;i++){
                    oDiv[i].time=null;
                    oDiv[i].onmouseover=function(){
                        startMove(this,500);
                    }
                    oDiv[i].onmouseout=function(){
                        startMove(this,100);
                    }
                }
            }

            function startMove(obj,target){
                clearInterval(obj.time);
                //记住此时这个开的定时器也要是用obj来限定是开的哪一个定时器，然后好让关的时候是对应的定时器
                obj.time=setInterval(function(){
                    var speed = (target-obj.offsetWidth)/6;
                    speed = speed>0?Math.ceil(speed):Math.floor(speed);
                    //如果这个div的宽度和目标值相等，关闭定时器
                    if(obj.offsetWidth==target){
                        clearInterval(obj.time);
                    }else{
                        obj.style.width=obj.offsetWidth+speed+'px';
                    }
                },30);
            }

        </script>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

多物体淡入淡出

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>多物体淡入淡出效果</title>
        <style>
            div{width: 200px;height: 200px;background: red;filter: alpha(opacity: 30);opacity: 0.3;
            margin: 10px;float: left;}
        </style>
        <script>
            //注意的是：alpha不能够共用的，会出现错误，所以是和定时器的用法相同，给每一个人都有一个alpha
            window.onload=function(){
                var oDiv = document.getElementsByTagName('div');
                for(var i=0;i<oDiv.length;i++){
                    oDiv[i].time =null;
                    oDiv[i].alpha=30;
                    oDiv[i].onmouseover=function(){
                        startMove(this,100);
                    }
                    oDiv[i].onmouseout=function(){
                        startMove(this,30);
                    }
                }
            }
            function startMove(obj,target){
                clearInterval(obj.time);
                obj.time = setInterval(function(){
                    var speed = (target-obj.alpha)/6;
                    speed = speed>0?Math.ceil(speed):Math.floor(speed);
                    if(obj.alpha==target){
                        clearInterval(obj.time);
                    }else{
                        obj.alpha+=speed;
                        obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
                        obj.style.opacity = obj.alpha/100;
                    }
                },30);

            }
        </script>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

Alex十年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js多物体运动

经验：在多物体运动里面，所有开始定义为常量的值，都不能通用，比如第一个案例中的定时器，还有就是多物体淡入淡出时的透明度值。一旦通用就会产生混乱。属性要与对应的运动对象进行绑定多物体运动：此时需要注意的是，相对于之前的案例，如果只有一个定时器，会出现当你快速移动鼠标时，第一个物体，还没有还原完，定时器就已经被关闭，而出现没有回答最开始的宽度的情况 ...
复制链接

扫一扫