关闭

JavaScript 多个属性一起变化

57人阅读 评论(0) 收藏 举报
分类:
<!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>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:20681次
    • 积分:1316
    • 等级:
    • 排名:千里之外
    • 原创:115篇
    • 转载:0篇
    • 译文:0篇
    • 评论:15条
    最新评论