原生js封装的运动框架,move-1.0.js

function getStyle(obj,name){				//获取非行间样式函数
	if(obj.currentStyle){
		return obj.currentStyle[name];			//兼容ie系列
	}else{
		return getComputedStyle(obj,false)[name];	//兼容火狐和chrome
	}
}

function startMove(obj,json,fn){	//运动框架

	clearInterval(obj.timer);		//定时器先清后开
	
	obj.timer=setInterval(function(){	
		var bStop=true;		//用于检测每项运动是否完成的标识

		for(var attr in json){
			var cur=0;		//变量cur用来存放获取到的现有样式值

			if(attr=='opacity'){			//获取现有样式,不透明度和其他样式分开
				cur=Math.round(parseFloat(getStyle(obj,attr))*100);
			}else{
				cur=parseInt(getStyle(obj,attr));
			}	

			var iSpeed=(json[attr]-cur)/6;			//缓冲运动计算速度
			iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);	   //判断向上或向下取整

			if(cur!=json[attr]){		//若每次循环有未达到目标的项目,设置为false
				bStop=false;
			}


			cur+=iSpeed;					//物体运动函数
			if(attr=='opacity'){
				obj.style.filter='alpha(opacity='+cur+')'
				obj.style.opacity=cur/100;
			}else{
				obj.style[attr]=cur+'px';
			}
			
		}

		if(bStop==true){			//当bStop为true时才结束循环
			clearInterval(obj.timer);
			if(fn){fn();}		//链式运动函数
		}
		
	},30)
}

简单说一下

  1. 用getStyle函数获取对象现有的样式,因为直接使用offset获取对象样式存在bug,offset获取的是包含content的width,padding和border的盒子模型宽度,而style.width设置的仅仅是包含content的width值,不含padding和border。当对象有border和padding值时会造成运动效果错误。

  2. 运动函数startMove包含三个参数,分别是obj--需添加运动效果的对象;json--运动对象改变的样式及数值;fn--回调函数(可选)。对象运动时改变的样式名和数值是以json的方作为参数传入,可以通知改变多个值。

  3. 运动过程依然是用计时器实现的,setInterval前一定要保证先clearInterval,防止多个定时器同时开启。

  4. 定义bStop变量,用于确定当多个运动同时发生时,检测每个运动事件是否完成,若有为完成的运动,值设为false,确定所有运动完成即bStop值为true时,停止计时器clearInterval停止运动。

  5. for in循环出获取到的对象样式,存在变量cur中。加个获取样式判断,若获取的是opacity,opacity*100并四舍五入取整,若是其他样式,加上px。

  6. 缓冲运动的速度采用的是对象样式的(目标值-现有值)再除以任意数字,数字越大运动速度越慢。因为现有值在不断变化,所以越接近目标值速度越慢,达到缓冲的目的。速度需要做判断,若是正向运动,目标值-现有值)结果为正,向上取整,若是反向运动,目标值-现有值)结果为负,想下取整。

  7. cur与速度进行叠加运算后赋值给obj.style,实现运动效果。

  8. 判断回调函数fn是否存在,若存在则执行fn();

  9. 具体的调用方式如下:

  10. startMove(obj,{'width':500,'height':500,'opacity':0.5});

    注意:改变宽高和定位的时候不需要加px,函数会自动给加上。

    以上就是一个较为完美的运动框架,加上布局后调用可以实现各大网站上主流的焦点图,轮播图的运动效果以及其他一些运动效果。欢迎大家吐槽,相互交流~O(∩_∩)O~

你可能感兴趣的:(JavaScript,轮播图,运动框架,焦点图,原生js)