animation动画函数实现

//获取dom中具体prop属性的值
function getStyle(dom, prop){
	if(dom.currentStyle){//兼容IE6/7/8
		return dom.currentStyle[prop];
	}else{
		return window.getComputedStyle(dom, null)[prop];
	}
}
//dom需要使用动画的dom节点,json为使用动画的属性,time为时间,cb为回调函数
function animation(dom, json, time = 30, cb){
	clearInterval(dom.timer);//多次触发时,清空定时器
	var speed, current, realPropValue;
	dom.timer = setInterval(function(){
		var lock = true;
		for(var prop in json){
			if(prop === 'opacity'){// 判断获取过来的属性是否为opacity
				current = parseFloat(getStyle(dom, prop)) * 100;
			}else{
				current = parseInt(getStyle(dom, prop));
			}
			speed = (json[prop] - current) / 7; //减速
			//speed并不总是整数,会导致和目标值不相等,所以需要对speed进行取整,大于0向上取整,小于0向下取整
			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
			realPropValue = current + speed;
			if(prop === 'opacity'){
				dom.style[prop] = realPropValue / 100;
			}else{
				dom.style[prop] = realPropValue + 'px';
			}
			if(json[prop] !== current){// 判断是否还有属性没有达到目标值
				lock = false;
			}
			if(lock){// 当所有属性都达到目标值停止定时器
				clearInterval(dom.timer);
				cb && cb();
			}
		}
	}, time);
}

//使用--已CSDN新内容为例子
var box = document.querySelector('.txt-refrash-new');
box.addEventListener("mouseover", function() {
	animation(this, {width: 1000, height: 200, opacity: 100}, 10, function() {
		alert('我是回调函数')
	});
});

结果:
在这里插入图片描述
鼠标放入后的效果
在这里插入图片描述

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值