前言：
而今姐妹们对“js移动动画”可能比较注重，各位老铁们都想要学习一些“js移动动画”的相关知识。那么小编在网络上汇集了一些关于“js移动动画””的相关知识，希望同学们能喜欢，小伙伴们快快来学习一下吧！首先，通过视频，看一下我们要实现的效果，视频如下：
视频加载中...
分析
1.盒子移动，我们可以理解为盒子的offsetLeft在不断的增加
2.offsetLeft在不断的增加，我们可以利用我们的定时器实现，setInterval可以实现重复执行盒子的offsetLeft不断增加
3.盒子什么时候停止呢?我们可以在定时器内增加一个判断条件，如果盒子的offsetLeft大于等于某个长度了，我们可以停止移动盒子
4.停止移动盒子的本质就是清除定时器clearInterval
5.怎么实现多个盒子移动呢？我们可以采用封装函数的方法，把盒子移动的定时器封装到函数里面，哪个盒子需要移动动画，哪个盒子就调用函数
6.调用函数的时候，我们需要传递那些实参给函数的形参呢，从定时器我们可以了解到，我们需要传递哪个对象需要移动，并且需要移动动画要移动到的终点。
代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { position: absolute; left: 0; width: 100px; height: 100px; background-color: red; } span { position: absolute; left: 0; top: 200px; width: 150px; height: 150px; background-color: purple; } </style></head><body> <div></div> <span></span> <script> // 用动画函数实现了重复多次采用同样效果的调用 function animate(obj, traget) { obj.timer = setInterval(function() { //obj.timer实现了给不同的元素事件添加了不同的定时器 if (obj.offsetLeft >= traget) { // 停止动画 本本质是停止定时器 clearInterval(obj.timer); } obj.style.left = obj.offsetLeft + 1 + 'px'; }, 30); } var div = document.querySelector('div'); var span = document.querySelector('span'); animate(div, 300); animate(span, 200); </script></body></html> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #js移动动画 #js中如何清除动画效果 #html图片移动动画 #js移动
