js运动-多物体运动

最新推荐文章于 2022-12-04 11:21:46 发布

关耳佳

最新推荐文章于 2022-12-04 11:21:46 发布

阅读量833

点赞数 2

分类专栏： JS小记

本文链接：https://blog.csdn.net/u014205965/article/details/45769939

版权

JS小记专栏收录该内容

25 篇文章 9 订阅

订阅专栏

基本步骤

1.通过getElementsByTagName获取到要做多物体运动的元素

2.然后for循环遍历元素，添加事件

3.定义startMove函数，需要两个参数，当前“做运动”的元素，和目标值target

注意问题：在多物体运动中，所有的东西不能公用；

<script>
        window.onload = function(){
            var liTags = document.getElementsByTagName('li'); // 第一步
            for(var i=0;i<liTags.length;i++){ // 第二步
                 liTags[i].onmouseover = function () {
                 startMove(this,400);
                 }
                 liTags[i].onmouseout = function () {
                 startMove(this,200);
                 }
            }
        }
        var timer = null;
        function startMove(obj,iTarget) { // 第三步，2个参数
            clearInterval(timer);
            timer = setInterval(function () {
                var iSpeed = (iTarget - obj.offsetWidth)/10;
                iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);// 缓冲运动注意取整处理
                if(obj.offsetWidth == iTarget){
                    clearInterval(timer);
                }else{
                    obj.style.width =  obj.offsetWidth+iSpeed+'px';
                }
            },30);
 
        }
</script>

问题：

当移入移出速度比较快的时候，就会出现有的li回不到原来的样子，卡在半路了；这是因为所有的li公用了一个定时器造成的；

当鼠标移入第一个li时，调用startMove开启一个定时器；鼠标移除li时，也需要开启一个定时器让li回到原来的位置，li走到半路上，我们移入第二个li，首先会清除定时器，这时候第一个li就卡到半路了。

解决这个问题：让每个li拥有自己的timer去控制他们的变化，在for循环的时候，给每个里定义自己的一个timer

liTags[i].timer = null;// 给每个li都添加一个timer

接着在 starMove 里面每次用的定时器都是当前 li 自己的，就不会互相干扰了。

这里由之前的timer变成了obj.timer (当前对象自己的timer)；到这里就没问题了。

完整代码如下：

<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>

加点样式：

<style>
        ul{list-style: none;}
        ul li{
            margin: 10px;
            width: 200px;height: 50px;
            background: lightblue;
        }
</style>

完整js代码

<script>
        window.onload = function(){
            var liTags = document.getElementsByTagName('li');
            for(var i=0;i<liTags.length;i++){
                 liTags[i].timer = null;// 给每个li都添加一个timer
                 liTags[i].onmouseover = function () {
                 startMove(this,400);
                 }
                 liTags[i].onmouseout = function () {
                 startMove(this,200);
                 }
            }
        }
        function startMove(obj,iTarget) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var iSpeed = (iTarget - obj.offsetWidth)/10;
                iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
                if(obj.offsetWidth == iTarget){
                    clearInterval(obj.timer);
                }else{
                    obj.style.width =  obj.offsetWidth+iSpeed+'px';
                }
            },30);
 
        }
</script>

接着在看一个例子：多物体运动-改变透明度

<script>
    window.onload = function () {
        var aImgs = document.getElementsByTagName('img');
        for(var i=0;i<aImgs.length;i++){
            aImgs[i].timer = null;
            aImgs[i].alpha = 100; // 把公用的alpha改成每个img对象都有的属性
            aImgs[i].onmouseover = function () {
                startMove(this,30);
            }
            aImgs[i].onmouseout = function () {
                startMove(this,100);
            }
        }
    }
    // var alpha = 100; 这里alpha在多物体运动里 不能公用
    function startMove(obj,iTarget) {
        clearInterval(obj.timer);
        var iSpeed = (iTarget - obj.alpha)/10;
            iSpeed = iSpeed>0 ? Math.ceil(iSpeed): Math.floor(iSpeed);
        obj.timer = setInterval(function(){
            if(obj.alpha == iTarget){
                clearInterval(obj.timer);
            }else{
                obj.alpha += iSpeed;
                obj.style.opacity =obj.alpha/100;
                obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
            }
        },30);
    }
</script>

关耳佳

关注

2
点赞
踩
2

收藏

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

基本步骤1.通过getElementsByTagName获取到要做多物体运动的元素2.然后for循环遍历元素，添加事件3.定义startMove函数，需要两个参数，当前“做运动”的元素，和目标值target 注意问题：在多物体运动中，所有的东西不能公用； window.onload = function(){ var liT
复制链接

扫一扫

专栏目录