javascript运动基础——多值同时运动

最新推荐文章于 2021-01-26 17:37:50 发布

口耳戈是个生僻字

最新推荐文章于 2021-01-26 17:37:50 发布

阅读量126

点赞数

分类专栏： javascript实例

本文链接：https://blog.csdn.net/qq_37199582/article/details/79444883

版权

javascript实例专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px; left: 400px;}
</style>
<script>
window.onload = function() {
	
	var oDiv1 = document.getElementById('div1');
	
	oDiv1.onclick = function() {
		
		startMove(this, {
			width : 200,
			height: 300
		}, 10);
	}
	
	function startMove(obj, json, iSpeed) {
		clearInterval(obj.iTimer);
		var iCur = 0;
			
		obj.iTimer = setInterval(function() {
			
			var iBtn = true;
						
			for ( var attr in json ) {
				
				//什么时候停止定时器？所有属性都运动到了目标点的时候
				
				var iTarget = json[attr];
				
				if (attr == 'opacity') {
					iCur = Math.round(css( obj, 'opacity' ) * 100);
				} else {
					iCur = parseInt(css(obj, attr));
				}
				
				if (iCur != iTarget) {
					iBtn = false;
					if (attr == 'opacity') {
						obj.style.opacity = (iCur + iSpeed) / 100;
						obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
					} else {
						obj.style[attr] = iCur + iSpeed + 'px';
					}
				}
				
			}
			
			//在这里来看下，所有属性是不是都到了目标点
			if (iBtn) {
				clearInterval(obj.iTimer);
			}
			
		}, 30);
	}
	
	function css(obj, attr) {
		if (obj.currentStyle) {
			return obj.currentStyle[attr];
		} else {
			return getComputedStyle(obj, false)[attr];
		}
	}
	
}
</script>
</head>

<body>
	<div id="div1"></div>
</body>
</html>

口耳戈是个生僻字

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript运动基础——多值同时运动

&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;&lt;title&gt;无标题文档&lt;/title&gt;&lt;style&gt;#div1 {widt
复制链接

扫一扫