浅谈原生JS实现jQuery的animate()动画

参数介绍:

obj
执行动画的元素
css JSON数值对,形式为“{属性名: 属性值}",指要执行动画的书序及其对应值
interval
属性每执行一次改变的时间间隔
speedFactor 速度因子,使动画具有缓冲效果,而不是匀速不变(speedFactor为1)
func 执行完动画后的回调函数

注意:

必须为每一个元素分别添加一个定时器,否则会互相影响。

cur != css[arr]判断是否每一个属性已经达到目标值。只有所有属性都达到目标值,才会清除定时器,flag的作用是防止某个属性第一个达到目标值但还有其他属性没有达到目标值的情况下清除定时器。因此,在每次改变前初始化flag为true,只要遇到一个没有达到目标的属性,就将flag置为false,直至所有属性达到目标值才清除定时器。

属性值opacity的值有小数,所以需要特殊处理: Math.ceil(speed)和Math.floor(speed)以及* 100和 / 100操作。

function animate(obj, css, interval, speedFactor, func) {
	clearInterval(obj.timer);
	function getCss(obj, prop) {
		if (obj.currentStyle)
			return obj.currentStyle[prop]; // ie
		else 
			return document.defaultView.getComputedStyle(obj, null)[prop];  // 非ie
	}
	obj.timer = setInterval(function(){
		var flag = true;
		for (var prop in css) {
			var cur = 0;
			if(prop == "opacity") 
				cur = Math.round(parseFloat(getStyle(obj, prop)) * 100);
			else 
				cur = parseInt(getStyle(obj, prop));
			var speed = (css[prop] - cur) * speedFactor;
			speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);
			if (cur != css[prop])
				flag = false;
			if (prop == "opacity") {
				obj.style.filter = "alpha(opacity : '+(cur + speed)+' )";
				obj.style.opacity = (cur + speed) / 100;
			}
			else 
				obj.style[prop] = cur + speed + "px";
		}
		if (flag) {
			clearInterval(obj.timer);
			if (func)
				func();
		}
	}, interval);
}
var li = document.getElementsByTagName("li");
for(var i = 0; i < li.length; i ++){
	li[i].onmouseover = function(){
		animate(this, {width: 100, opacity: 0.5}, 10, 0.01, function(){
			alert("Finished!");
		});
	}
}
展开阅读全文
©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值