JS函数动画（透明度淡入淡出）封装

最新推荐文章于 2023-11-05 18:22:34 发布

原创最新推荐文章于 2023-11-05 18:22:34 发布 · 751 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #函数 #动画 #封装函数 #透明度淡入淡出函数

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

13 篇文章

订阅专栏

本文介绍了一种使用定时器实现平滑动画效果的方法，通过计算目标元素的当前位置与目标位置之间的差值来调整移动速度，确保动画过程流畅且精确。同时，提供了获取元素当前CSS样式值的函数。

function easeMove(obj,attr,iTarget,speedScale,time){
				clearInterval(obj.timer)
				obj.timer=setInterval(function(){
					var attrValue=getStyle(oAll,attr)*100;
					var speedEnd = (iTarget - attrValue) / speedScale;
					speedEnd=speedEnd>0?Math.ceil(speedEnd):Math.floor(speedEnd);
					//console.log("计算速度值:"+speedEnd);
					var isStop = true;
					if(iTarget!=attrValue){
						isStop=false;
						obj.style[attr]=(attrValue+speedEnd)/100;
					}if(isStop){
							clearInterval(obj.timer);		
						}
					console.log("attrValue:"+ obj.style[attr]);
				},time);
			}

//获得CSS样式属性值：

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