JS函数动画（缓冲上下左右运动）封装

最新推荐文章于 2022-04-14 22:07:51 发布

原创最新推荐文章于 2022-04-14 22:07:51 发布 · 678 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #h函数 #封装

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

13 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的平滑动画效果，通过调整速度和时间参数来控制元素的移动过程，实现了从当前位置到目标位置的平滑过渡。同时，文章还提供了一种获取元素CSS样式的通用方法。

function easeMove(obj,attr,targetPos,speedEnd,time){
				clearInterval(obj.timer)
				obj.timer = setInterval(function(){
					var attrValue = parseInt(getStyle(obj,attr));
					var speed = Math.abs(targetPos - attrValue)/speedEnd
					speed = speed>0?Math.ceil(speed):Math.floor(speed);
					if(attrValue == targetPos){
						clearInterval(obj.timer);
					}else{
						obj.style[attr] = attrValue + speed + "px";
					}
					console.log(getStyle(obj,attr));
				},time)
			}

//获得CSS样式属性值：

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