JS元素属性动画封装-CSDN博客

本文链接：https://blog.csdn.net/wulianwangxuchenqi/article/details/97414430

某个元素的多个属性同时变化，或者连续变化

可将这个功能封装为函数，js代码可写在js文件中，直接调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素属性变化封装函数</title>
		<style type="text/css">
			#box{
				width: 100px;
				height: 100px;
				background: #3BB335;
				opacity: 0.8;
				filter: alpha(opacity:80);
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<script type="text/javascript">
			function startMove(domobj,json,fn){
				//每一个对象只有一个定时器,防止对同一个对象调用多次定时器,所以在对某个对象调用定时器时
				//先清除它之前的定时器
				clearInterval(domobj.timer);
				domobj.timer = setInterval(()=>{
					var flag = true;//为检测属性是否全部执行完,先假设全部执行完,最后再测试,只要有一个
					//没有执行完,就设为false,不能清除定时器
					for(let attr in json){
						var target = json[attr];
						var current= parseInt(getStyle(domobj,attr));
						//专门检测是否有透明度的变化,因为它的值为小数,所以避免舍入进位时出错,特殊处理
						if(attr == "opacity"){
							current = getStyle(domobj,attr)*100;
						}
						var speed = (target-current)/7;
						//为达到减速的效果,将每次未走完的长度均分,每次走剩下的几分之一,这样在相同时间内
						//走的越来越少,也就达到了减速效果,但这样也产生了一个问题,就是永远走剩下的几分之一,
						//永远到不了目标值,所以采用math.ceil和math.floor的方法,分别对应当前值小于目标值,
						//当前值大于目标值的时候,这样就可以达到目标值
						speed = speed>0?Math.ceil(speed):Math.floor(speed);
						if(attr == "opacity"){
							domobj.style.opacity = (current+speed)/100;
							domobj.style.filter="alpha(opacity:("+(current+speed)+")";
						}else{
							domobj.style[attr] = current+speed+"px";
						}
						//如果同时变化的属性有没有执行完的,则不会执行清除定时器的操作
						if(current != target){
							flag = false;
						}	
					}
					if(flag){
						clearInterval(domobj.timer);
						//第一次要同时变化的属性全部变化完,则执行回调函数,会执行第二次要变化的属性
						if(fn){
							fn();
						}
					}
				},30)
			}
			//获取内联或外联的样式值的兼容写法的封装函数
			function getStyle(domobj,attr){
				if(window.getComputedStyle){
					return getComputedStyle(domobj,null)[attr];
				}
				return domobj.currentStyle[attr];
			}
			
			//鼠标移入时先同时显示宽度和透明度的变化,再显示高度的变化
			var div = document.querySelectorAll("div")[0];
			div.onmouseover = function(){
				startMove(this,{"width":800,"opacity":30},()=>{
					startMove(this,{"height":800});
				});	
			}
            //鼠标移出时先显示高度的变化，再显示宽度和透明度的变化,
			div.onmouseout = function(){
				startMove(this,{"width":100,"opacity":80},()=>{
					startMove(this,{"height":100});
				});	
			}
			
			
		</script>
	</body>
</html>

元素样式发生变化