Js运动

最新推荐文章于 2022-04-14 22:17:01 发布

weixin_46399035

最新推荐文章于 2022-04-14 22:17:01 发布

阅读量452

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46399035/article/details/104487973

版权

**JavaScript之Js运动*

在我们进行web开发的过程中，为了与用户进行更加友好、有趣的交互，拥有一套完美的运动框架就能轻松解决。

这次就给大家带来Javascript学习中Js运动的编写和注意事项。实现运动的思想很简单，首先对这个元素获取定位，然后通过改变该元素的left值和top值或者透明度，通过定时器就可以实现元素的运动效果。

Js运动代码编写的过程，基本步骤如下：

1、关闭上一次定时器。

因为重复点击多次开始运动，就相当于重复启动了多次定时器，这样造成的麻烦就是点击多次运动会加速。如果我们确保同一时间只启动一个定时器，在每次启动定时器之前先将上一次定时器关闭，就可以有效的解决上述问题。
关闭定时器：clearInterval(timer);
2、运动和停止分开。
到达目的值后，点击按钮，还会往前运动，这时我们就需要用if-else语句将运动和停止分开。

var timer = setInterval(function(){
	if(oDiv.offsetLeft >= 500){
	clearInterval(timer);   //停止运动
	}else{
		oDiv.style.left = oDiv.offsetLeft + speed + "px"; //运动
    }
},30);

3、分析元素怎么动

接下来我们将从匀速运动、淡入淡出、缓冲运动、多物体运动这些案例逐一展开分享。

一、匀速运动：速度不会改变。

分析： 1.实现匀速运动效果，我们先设置元素样式，然后通过document.getElementById(id)获取到对应的id节点元素。
2.关闭上一次定时器
3.定义speed速度（可以随意定义运动的速度值）
4.设置运动和停止分开
【注】接下来的案例分析与之类似，在代码块中详细注释。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
        	//css样式设置
            *{margin: 0px; padding: 0px;}
            #div1{width: 100px; height: 100px; background-color: red; position: absolute; left: 0px; top: 200px;}
        </style>
        <script>
            window.onload = function (){
                var oBtn = document.getElementById("btn1");//获取btn1元素节点
                var oDiv = document.getElementById("div1");//获取div1元素节点

                oBtn.onclick = function(){
                    clearInterval(timer);//关闭上一次定时器
                    var speed = 8;//设置速度为8

                    var timer = setInterval(function(){//记录定时器返回值，设置定时器，30ms运动一下
                        if(oDiv.offsetLeft >= 500){
                            clearInterval(timer);//如果运动到目的值，关闭定时器
                        }else{
                            oDiv.style.left = oDiv.offsetLeft + speed + "px";//运动方式
                        }
                    },30);
                }
            }
        </script>
    </head>
    <body>
        <button id = 'btn1'>开始运动</button>
        <div id = 'div1'></div>
    </body>
</html>

来看一下匀速运动的效果图：
在这里插入图片描述
**

二、分享到菜单案例

**
封装了starMove和startMove2函数

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #menu{width: 100px; height: 200px; background-color: gray; position: absolute; top: 300px; left: -100px;}
            #menu span{width: 20px; height: 60px; line-height: 20px; background-color: yellow; position: absolute; left: 100px; top: 70px;}
        </style>
        <script>
            window.onload = function(){
                var oMenu = document.getElementById("menu");
                //鼠标移入，调用startMove函数
                oMenu.onmouseover = function(){
                    startMove();
                }
                //鼠标移出，调用startMove2函数
                oMenu.onmouseout = function(){
                    startMove2();
                }
            }
            var timer = null; //记录定时器返回值
            function startMove(){
                var oMenu = document.getElementById("menu");
                var speed = 5;
                //1、每次启动定时器，将上一次定时器关闭
                clearInterval(timer);//关闭定时器
                timer = setInterval(function(){
                    //2、运动和停止分开,目的值是左侧边框位置0px
                    if(oMenu.offsetLeft == 0){
                        clearInterval(timer);
                    }else{
                        oMenu.style.left = oMenu.offsetLeft + speed + 'px';//运动
                    }
                }, 30);
            } 
            function startMove2(){
                var oMenu = document.getElementById("menu");
                var speed = -5;
                //1、每次启动定时器，将上一次定时器关闭
                clearInterval(timer);
                timer = setInterval(function(){
                    //2、运动和停止分开，目的值是左侧边框位置-100px
                    if(oMenu.offsetLeft == -100){
                        clearInterval(timer);//关闭定时器
                    }else{
                        oMenu.style.left = oMenu.offsetLeft + speed + 'px';//运动
                    }
                }, 30);
            }
        </script>
    </head>
    <body>
        <div id = 'menu'>
            <span>分享到</span>
        </div>
    </body>
</html>

上面的代码未免显得啰嗦笨拙，我们可以将它改动一下，把speed和iTarget的值作为形参传递到函数中，这样只封装成一个startMove函数就可以实现。

在这里插入代码片			window.onload = function(){
                var oMenu = document.getElementById("menu");
                oMenu.onmousemove = function(){
                    starMove(3,0);//speed为3，目标值为0px
                };
                oMenu.onmouseout = function(){
                    starMove(-3,-100);//speed为-3，目标值为-100px
                }
                // 记录定时器返回值
                var timer = null;
                function starMove(speed, iTarget){
                    // 获取menu的id
                    var oMenu = document.getElementById("menu");
                    // 关闭定时器
                    clearInterval(timer);
                    // 运动和停止
                    timer = setInterval(function(){
                        if(oMenu.offsetLeft == iTarget){
                            clearInterval(timer);
                        }else{
                            oMenu.style.left = oMenu.offsetLeft + speed + "px";
                        }
                    },3);
                }
            }