点击按钮控制div上下运动——函数封装2

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>点击按钮控制div前后运动——函数封装2</title>
	<style>
	#div1{ width: 100px; height: 100px; background: #ccc; position: absolute; left: 30px; top: 50px;}
	</style>
</head>
<body>
	<input type="button" id="btn1" value="向上" />
	<input type="button" id="btn2" value="向下" />
	<div id="div1"></div>
	<script>
	// 封装获取非行间样式函数
	function getStyle(obj,attr){
		return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr];
	};

	window.onload = function(){
		// 获取样式
		var oBtn1 = document.getElementById('btn1');
		var oBtn2 = document.getElementById('btn2');
		var oDiv = document.getElementById('div1');
		// alert(getStyle( oDiv, 'left' ));			//测试getStyle函数

		// 向上运动
		oBtn1.onclick = function(){
			doMove(oDiv ,'top' ,11 ,50);
		};

		// 向下运动
		oBtn2.onclick = function(){
			doMove(oDiv ,'top' ,12 ,500);
		};

		// 封装doMove函数
		function doMove(obj,attr,dir,target){
			// 判断方向
			dir = parseInt(getStyle(obj,attr)) < target ? dir : -dir;

			clearInterval(obj.timer);
			
			obj.timer = setInterval (function(){
				var dis = parseInt(getStyle( obj, attr )) + dir;	

				if(dis > target && dir > 0 || dis < target && dir < 0){
					dis = target;
				}
				obj.style[attr] = dis + 'px';
				console.log(dis); 	//控制台输出距离变化
				
				if(dis == target){
					clearInterval(obj.timer);
				}
			},30);
		};	
	};
	</script>
</body>
</html>

复制代码,本地运行


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值