js中运动回调函数(链式运动)

js中的链式运动总结
<script>
window.onload = function() {	
	var oDiv1 = document.getElementById('div1');	
	oDiv1.onclick = function() {		
		startMove(this, {
			width : 200
		}, 10, function() {
			startMove(this, {
				height : 200
			}, 10);
		});
	}//封装一个运动函数	
	function startMove(obj, json, iSpeed, fn) {
		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);//由于小数精度的问题(即两个小数相加得到的并不是准确的数值)所以在透明度的设置中我们一般选择的范围是0到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) +')';//非标准IE浏览器下
					} else {
						obj.style[attr] = iCur + iSpeed + 'px';
					}
				}
				
			}
			
			if (iBtn) {
				clearInterval(obj.iTimer);
				fn && fn.call(obj);//利用call方法改变函数中this的指向问题
			}
			
		}, 30);
	}
	
	function css(obj, attr) {//封装了一个获取对象属性值的兼容函数
		if (obj.currentStyle) {
			return obj.currentStyle[attr];
		} else {
			return getComputedStyle(obj, false)[attr];
		}
	}
	
}
</script>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值