js的animate函数

/*
 	动画函数:
 		dom:要运动的节点对象
 		o:{属性:目标值,属性:目标值....}  (透明度使用属性:opacity:100) 透明度的值是0-100;  里面的opacity 和  filter会自动做转换。
 		time:切换的频率,表示运动的快慢
 		fn:回调函数,在运动执行完毕后执行。
 */
                             function animate(dom, o,time,fn) {
				if(time==undefined){  //默认的切换频率
					time=10;
				}
				//dom.termId :为每一个运动的物体添加一个属于自己的线程标识
				clearInterval(dom.termId);

				dom.termId = setInterval(function() { //创建一个定时器,实现运动
					dom.isOver = true; //是否可以停止定時器
					for (var property in o) {
						if (property == "opacity") {//如果是透明度
							var currentValue = parseInt(getStylePropertyValue(dom, property) * 100); //当前样式属性的值		
						} else{//其他样式属性
							var currentValue = parseInt(getStylePropertyValue(dom, property)); 当前样式属性的值
						}
						
						//速度   正速度  负速度
						var speed = (o[property] - currentValue) / 10;
						// 三元表达式  三目运算符
						speed = currentValue > o[property] ? Math.floor(speed) : Math.ceil(speed)

						currentValue += speed; //改变样式属性的值

						if (currentValue != o[property]) {
							dom.isOver = false; //標識不停止定時器
						}

						if (property == "opacity") {
							dom.style.opacity = currentValue / 100;
							dom.style.filter = 'alpha(opacity= ' + currentValue + ')';
						} else {
							dom.style[property] = currentValue + "px"; //改变物体的样式属性值		
						}

					}

					if (dom.isOver) {  //停止定时器
						clearInterval(dom.termId);
						if(fn){  //执行回调函数
							fn();
						}
					}

				}, time)  //基于切换的频率来改变运动的快慢

			}

			/*获取指定样式的属性值*/
			function getStylePropertyValue(dom, property) {
				if (window.getComputedStyle) { //標準瀏覽器
					//
					return getComputedStyle(dom, null)[property];
				} else {
					return dom.currentStyle[property]; //IE瀏覽器
				}
			}
		

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值