44、JavaScript的运动----任意属性值的运动---应用

灰太狼 2022-09-22 04:58 158阅读 0赞

1、利用任意属性值的运动的例子

2、测试代码

<head>
    		<meta charset="UTF-8">
    		<title>任意值运动框架</title>
    		<style>
    			div {
    				width: 100px;
    				height: 50px;
    				font-size: 14px;
    				background: red;
    				margin-top: 50px;
    				border: 2px solid black;
    			}
    		</style>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>无标题文档</title>
    		<script type="text/javascript">
    			window.onload = function() {
    				var aDiv = document.getElementsByTagName('div');
    				aDiv[0].onclick = function() {
    					startMove(this, 'width', 300);
    				}
    				aDiv[1].onclick = function() {
    					startMove(this, 'height', 200);
    				}
    				aDiv[2].onclick = function() {
    					startMove(this, 'fontSize', 100);
    				}
    				aDiv[3].onclick = function() {
    					startMove(this, 'borderWidth', 50);
    				}
    			}
    
    			function getStyle(obj, attr) {
    				if (obj.currentStyle) {
    					return obj.currentStyle[attr];
    				} else {
    					return getComputedStyle(obj, false)[attr];
    				}
    			}
    
    			function startMove(obj, attr, iTarget) {
    				clearInterval(obj.timer);
    				obj.timer = setInterval(function() {
    					var iCur = parseInt(getStyle(obj, attr));
    					var iSpeed = (iTarget - iCur) / 8;
    					iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    					if (iCur == iTarget) {
    						clearInterval(obj.timer);
    					} else {
    						obj.style[attr] = iCur + iSpeed + 'px';
    					}
    				}, 30)
    			}
    		</script>
    	</head>
    
    	<body>
    		<div></div>
    		<div></div>
    		<div>
    			asdfsd
    		</div>
    		<div></div>
    	</body>