在上个随笔中贴出了效果库的整体框架,和一个简单的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