如何写一个通用的JavaScript效果库!(2/2)_Javascript教程-查字典教程网
如何写一个通用的JavaScript效果库!(2/2)
如何写一个通用的JavaScript效果库!(2/2)
发布时间:2016-12-30 来源:查字典编辑
摘要:在上个随笔中贴出了效果库的整体框架,和一个简单的opacity插件.今天这个随笔主要是扩展其他常用效果插件,毕竟框架只能是个空壳,内容还是要...

在上个随笔中贴出了效果库的整体框架,和一个简单的opacity插件.今天这个随笔主要是扩展其他常用

效果插件,毕竟框架只能是个空壳,内容还是要自己充实。

如果看过了我上篇的实现细节,这里就不多说废话了,来段代码先:

复制代码 代码如下:

/**//****************************************************/

//移动,这里是moveto就是移动到x,y当然,大家也可以再扩展一个moveby移动x个象素

Effect.Init.move=function(effect){//初始化

if(effect.options.x!==undefined||effect.options.y!==undefined){

varpos=Position.cumulativeOffset(effect.element);

effect.setting.left=pos[0];

effect.setting.top=pos[1];

effect.setting.position=effect.element.style.position;

effect.element.style.position="absolute"

effect.options.x=(effect.options.x===undefined)?effect.setting.left:effect.options.x;

effect.options.y=(effect.options.y===undefined)?effect.setting.top:effect.options.y;

}

}

Effect.Fn.move=function(effect,pos){//效果

if(effect.options.x===undefined&&effect.options.y===undefined)return

effect.element.style.left=effect.setting.left+(effect.options.x-effect.setting.left)*pos+"px";

effect.element.style.top=effect.setting.top+(effect.options.y-effect.setting.top)*pos+"px";

}

/**//****************************************************/

/**//****************************************************/

//zoombyGo_Rush(阿舜)fromhttp://ashun.cnblogs.com/

Effect.Init.zoom=function(effect){

effect.setting.zoom=effect.element.style.zoom||1;

//firefox不支持css的zoom用改变width,height的方式代替

if(effect.options.zoom!==undefined&&navigator.userAgent.toLowerCase().indexOf('firefox')!=-1){

effect.options.w=effect.element.offsetWidth*effect.options.zoom;

effect.options.h=effect.element.offsetHeight*effect.options.zoom;

}

}

Effect.Fn.zoom=function(effect,pos){

if(effect.options.zoom===undefined)return;

effect.element.style.zoom=effect.setting.zoom+(effect.options.zoom-effect.setting.zoom)*pos

}

/**//****************************************************/

/**//****************************************************/

//size同上,是sizeto,改变到指定大小byGo_Rush(阿舜)fromhttp://ashun.cnblogs.com/

Effect.Init.size=function(effect){

if(effect.options.w!==undefined||effect.options.h!==undefined){

effect.setting.overflow=effect.element.style.overflow||'visible';

effect.setting.width=effect.element.offsetWidth;

effect.setting.height=effect.element.offsetHeight;

effect.element.style.overflow="hidden"

effect.options.w=(effect.options.w===undefined)?effect.setting.width:effect.options.w;

effect.options.h=(effect.options.h===undefined)?effect.setting.height:effect.options.h;

}

}

Effect.Fn.size=function(effect,pos){

if(effect.options.w===undefined&&effect.options.h===undefined)return;

effect.element.style.width=effect.setting.width+(effect.options.w-effect.setting.width)*pos+"px";

effect.element.style.height=effect.setting.height+(effect.options.h-effect.setting.height)*pos+"px";

}

/**//****************************************************/

/**//****************************************************/

//背景色byGo_Rush(阿舜)fromhttp://ashun.cnblogs.com/

Effect.Init.bgcolor=function(effect){

if(effect.options.bgcolor!==undefined&&/^#?[a-f0-9]{6}$/i.test(effect.options.bgcolor)){

varcolor=effect.element.style.backgroundColor||"#ffffff";

//FireFox下,即使css样式设置背景为#ffffff格式,但程序取到的是rgb(255,255,255)格式,这里把他转化为#ffffff格式

if(/rgb/i.test(color)){//"rgb(255,0,255)"

//vararr=color.replace(/[rgb(s)]/gi,"").split(",")

vararr=eval(color.replace("rgb","newArray"))

color="#"+Number(arr[0]).toColorPart()+Number(arr[1]).toColorPart()+Number(arr[2]).toColorPart()

}

effect.setting.bgcolor=color

}

}

Effect.Fn.bgcolor=function(effect,pos){

if(effect.options.bgcolor===undefined)return;

varc1=effect.setting.bgcolor,c2=effect.options.bgcolor

vararr1=[parseInt(c1.slice(1,3),16),parseInt(c1.slice(3,5),16),parseInt(c1.slice(5),16)]

vararr2=[parseInt(c2.slice(1,3),16),parseInt(c2.slice(3,5),16),parseInt(c2.slice(5),16)]

varr=Math.round(arr1[0]+(arr2[0]-arr1[0])*pos)

varg=Math.round(arr1[1]+(arr2[1]-arr1[1])*pos)

varb=Math.round(arr1[2]+(arr2[2]-arr1[2])*pos)

effect.element.style.backgroundColor="#"+r.toColorPart()+g.toColorPart()+b.toColorPart()

}

/**//****************************************************/

/**//****************************************************/

//透明度,这个上个贴过了byGo_Rush(阿舜)fromhttp://ashun.cnblogs.com/

Effect.Init.opacity=function(effect){

if(effect.options.opacity===undefined)return;

effect.setting.opacity=Opacity(effect.element);

}

Effect.Fn.opacity=function(effect,pos){

if(effect.options.opacity===undefined)return;

Opacity(effect.element,effect.setting.opacity+(effect.options.opacity-effect.setting.opacity)*pos);

}

/**//****************************************************/

这里effect.setting是非常有用而且非常重要的冬冬,所有的通过options传进来自定义函数都可以

通过effect.setting来获取element最初的设置。在很多场合,我们需要在options中传一个onComplete

函数进来,用来在效果执行完毕后,打扫战场,恢复一些设置。

这些效果是可以重叠的,大家可以看看下面我写的例子。

写了十来个例子,应该很详细了。

完整的,可调试代码和例子如下:

/**//* 这个函数的代码来自 Prototype.js http://prototype.conio.net/ 如果页面引用了prototype.js ,则可以删除下面这个函数, 当然,即使不删除也没关系,因为作了简单的兼容性判断 */ (function(){ if (!("Prototype" in window)){ Prototype={emptyFunction:function(){}}; Class ={ create: function(){return function(){this.initialize.apply(this, arguments)}} }; $ = function(element){ return typeof(element)=="string"?document.getElementById(element):element }; $A= function(arrLike){ for(var i=0,ret=[];i

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类