JS函数动画（匀速上下左右运动）封装

最新推荐文章于 2022-08-01 10:07:42 发布

原创最新推荐文章于 2022-08-01 10:07:42 发布 · 693 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #函数封装 #动画

模块功能代码专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的均匀运动动画效果，通过设置目标位置、速度和时间间隔，使元素平滑移动到指定位置。文章详细解释了如何利用setInterval和clearInterval控制动画的连续性和停止，以及如何获取和解析元素的当前CSS属性值。

function uniformMove(obj,attr,targetPosition,speed,time){
				clearInterval(obj.timer)
				obj.timer = setInterval(function(){
					//通过属性名获得属性值
					//getStyle(obj,attr) 是字符串"~px"
					var attrvalue=parseInt(getStyle(obj,attr));
					//var attrvalue=parseInt(getComputedStyle(obj)[attr]);
					if(Math.abs(targetPosition-attrvalue)<=Math.abs(speed)){
						obj.style[attr]=targetPosition+"px";
						clearInterval(obj.timer);
					}else{
						obj.style[attr]=attrvalue+speed+"px";
					}
				console.log("offset: "+ attrvalue);
				},time);
			}

//获得CSS样式属性值：

function getStyle(obj,attr){
			if(obj.currentStyle){
					//支持IE
					return obj.currentStyle[attr];
				}else{
					return getComputedStyle(obj)[attr];
				}
			}