JavaScript 多个属性一起变化_js同时改变两个标签属性-优快云博客

本文链接：https://blog.youkuaiyun.com/cyanciel/article/details/53997808

本文介绍了一个使用纯 JavaScript 实现的混合动画案例，该动画能够改变 div 的宽度、高度、透明度及圆角。通过计算属性变化量并逐步更新样式来完成动画效果。适用于希望了解简单动画实现原理的前端开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<title>运动效果</title>
		<meta charset="utf-8" />
	</head>
		<style>
			div {
				width: 150px;
				height: 150px;
				background: aliceblue;
				opacity: 1;
				border-radius:75px;
			}
		</style>
		<script>
			window.onload = function(){
				var oDiv = document.getElementsByTagName('div')[0];
				oDiv.onclick = function(){
					mixedAnimation(this,{"width":500,"height":500,"opacity":0.5,"border-radius":250},2000);
				}
				function mixedAnimation(obj,options,time)
				{
					//记录所有的起始属性
					var start = [];
					//记录所有属性的变量量
					var delta = [];
					//循环遍历 
					for (var name in options) {
						//将所有的起始属性，保存在start[]数组中
						start[name] = parseFloat(getStyle(obj,name));
						//将所有属性的变化量，保存在delta[]数组中
						delta[name] = options[name] - start[name];
					}
					//计算变换的总次数（向上取整）
					var total = Math.ceil(time/30);
					//记录现在的变换次数是哪一次
					var count = 0;
					
					var timer = setInterval(function(){
						//记录 变化次数	
						count++;
						for (var name in options) {
							//定义unit
							var unit = 'px';
							if(name == 'opacity') {
								unit = '';
							}
							//如果是最后一次变化
							if (count == total) {
								obj.style[name] = options[name] + unit;
							} else {
								obj.style[name] = start[name]+delta[name]*count/total + unit;
							}
						}
						if (count == total){
							clearInterval(timer);
							timer = null;
						}
					
					},30);
					
				}
				function getStyle(obj, attr)
				{
					if (typeof(obj.currentStyle) == 'undefined') {
						return getComputedStyle(obj,null)[attr];
					}
					return obj.currentStyle[attr];
				}	
			}
		</script>
	<body>
		<div></div>
	</body>
</html>