封装方法⭐⭐⭐⭐⭐⭐

	// 获取元素样式
	function getStyle(dom,attr){  
		if (dom.currentStyle) {    
			return dom.currentStyle[attr];  
		} else {    
			return getComputedStyle(dom)[attr];  
		}
	}

	
	function animate(dom,options,callback){  
		// 遍历对象属性  
		for (var attr in options){    
			// 获取元素当前的attr值    
			if (attr === 'opacity') {      
				// 获取当前元素的透明度*100      
				var current = parseInt( getComputedStyle(dom)[attr]*100 );      
				var target = options[attr]*100;    
			} else if (attr.indexOf('scroll') !== -1){      
				var current = dom[attr];      
				var target = options[attr];    
			} else {      
				var current = parseInt( getComputedStyle(dom)[attr] )      
				var target = options[attr];    
			}    
			options[attr] = {      
				'current': current,      
				'target': target    
			}    
			// 目标数据结构:    
			// options = {    
			//   'width': {    
			//     'current': 100,;    
			//     'target': 300;    
			//   },    
			//   'height': {    
			//     'current': 100,;    
			//     'target': 300;    
			//   },    //   ...    
			// }  
		}
 
 		 clearInterval(dom.timer)  
 		 dom.timer = setInterval(function (){    
 		 	// 遍历对象,取出数据    
 		 	for (var attr in options){      
 		 		var current = options[attr].current;      
 		 		var target = options[attr].target;      
 		 		// 持续变化的速度      
 		 		var speed = (target - current)/10;      
 		 		// 浮点数计算会造成结果有偏差,可能造成数据丢失:取整      
 		 		// 判断运动方向取整      
 		 		speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
      	
      				// 临界值判断:剩余运动量<=每次的运动量      
      				if ( Math.abs( target - current ) <= Math.abs(speed) ) {        
      					// 到达终点        
      					if (attr === 'opacity') {          
      						dom.style[attr] = target/100 // 立即到达终点        
      					} else if (attr.indexOf('scroll') !== -1) {          
      						dom[attr] = target;        
      					} else {          
      						dom.style[attr] = target + 'px';        
      					}
        
        				// 删除已运动完成的属性        
        				delete options[attr]
        				for (var attr in options){          
        					// 还有其他属性没运动完成,提前结束当前程序,不清除计时器          
        					return false;        
        				}        
        				//如果有回调函数,则执行回调函数        
        				typeof callback === 'function'? callback() : '';        
        				clearInterval(dom.timer) // 清除计时器      
        			} else {        
        				// 未到达终点        
        				options[attr].current += speed;        
        				if (attr === 'opacity') {          
        					dom.style[attr] = options[attr].current/100;        
        				} else if (attr.indexOf('scroll') !== -1) {          
        					dom[attr] = options[attr].current;        
        				} else {          
        					dom.style[attr] = options[attr].current + 'px';        
        				}      
        			}    
        		}  
        	},20)
        }

	// 获取元素到最外层定位父级的距离
	function offset(dom,bool){  
		var t = 0, l = 0;  
		var bdl = dom.clientLeft // 保存当前元素的左边框  
		var bdt = dom.clientTop// 保存当前元素的上边框  
		while(dom){    
			l += dom.offsetLeft + dom.clientLeft;    
			t += dom.offsetTop + dom.clientTop;    
			// 每次循环完让当前dom元素等于他的定位父级    
			dom = dom.offsetParent;  
		}  
		if (bool) {// 包含自身边框    
			return {left: l, top: t}  
		} else {// 不包含自身边框    
			return {left: l-bdl, top: t-bdt}  
		}
	}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值