原声js运动封装,轮播图

function animate (ele,targetObj,callback) {
				//console.log(callback)
				if(ele.timer){clearInterval(ele.timer)};
				
				ele.timer =  setInterval(function(){
						
						//假设已经到了目的地
						var  flag = true;
					
						for(var key in targetObj){
							//console.log(key)//left  opacity
							//console.log(targetObj[key])//100  0.5
							
							if(key =='opacity'){
								var target = targetObj[key];//0.5目标值
								var dir = key;//opacity
								
								var speed = (target-parseFloat(getStyle(ele,key)))/8*100
								//三目运算
								speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
								
								ele.style[key] = parseFloat(getStyle(ele,key)) +speed/100 ;
								//console.log(ele.offsetLeft)
								
								if(parseFloat(getStyle(ele,key)) != target){
									flag = false;
									
									
								}
							}else{
								var target = targetObj[key];//目标值
								var dir = key;//方向  left top
								
								var speed = (target-parseInt(getStyle(ele,key)))/8;
								//三目运算
								speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
								
								ele.style[key] = parseInt(getStyle(ele,key)) +speed +'px';
								//console.log(ele.offsetLeft)
								
								if(parseInt(getStyle(ele,key)) != target){
									flag = false;
//									console.log(key,'没有完成了')
								}
							}
							
							
						}
						
						//判断一个下 所有的目标是否都完成了
						console.log(flag)
						if(flag){
							clearInterval(ele.timer)
							console.log('本次运动结束')
							if(callback){callback();}
						}
				},80)
				
				
			} 
		

猜你喜欢

转载自blog.csdn.net/qq_41831345/article/details/79769117
今日推荐