博客园  :: 首页  :: 管理

怎样写一个通用的JavaScript效果库!(2/2)

Posted on 2007-01-16 09:11  Go_Rush  阅读(5108)  评论(7编辑  收藏  举报
续上回:  怎样写一个通用的JavaScript效果库!(1/2) 

在上个随笔中贴出了效果库的整体框架,和一个简单的opacity插件. 今天这个随笔主要是扩展其他常用
效果插件,毕竟框架只能是个空壳,内容还是要自己充实。
如果看过了我上篇的实现细节,这里就不多说废话了,来段代码先:

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

// 移动, 这里是move to  就是移动到 x,y 当然,大家也可以再扩展一个move by  移动x个象素
Effect.Init.move=function(effect){   //初始化
    if (effect.options.x!==undefined || effect.options.y!==undefined){        
        
var pos=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";
}

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




/****************************************************/
// zoom   by Go_Rush(阿舜) from http://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  同上,是 size to, 改变到指定大小 by Go_Rush(阿舜) from http://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";
}

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


/****************************************************/
// 背景色 by Go_Rush(阿舜) from http://ashun.cnblogs.com/
Effect.Init.bgcolor=function(effect){
    
if (effect.options.bgcolor!==undefined && /^\#?[a-f0-9]{6}$/i.test(effect.options.bgcolor)){
        
var color =effect.element.style.backgroundColor || "#ffffff";
        
//FireFox 下,即使css样式设置背景为 #ffffff格式,但程序取到的是 rgb(255,255,255)格式, 这里把他转化为 #ffffff格式
        if (/rgb/i.test(color)){               // "rgb(255, 0, 255)"
            //var arr=color.replace(/[rgb\(\s\)]/gi,"").split(",")
            var arr=eval(color.replace("rgb","new Array"))       
            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;
    
var c1=effect.setting.bgcolor,c2=effect.options.bgcolor
    
var arr1=[parseInt(c1.slice(1,3),16),parseInt(c1.slice(3,5),16),parseInt(c1.slice(5),16)]
    
var arr2=[parseInt(c2.slice(1,3),16),parseInt(c2.slice(3,5),16),parseInt(c2.slice(5),16)]
    
var r=Math.round(arr1[0]+(arr2[0]-arr1[0])*pos)
    
var g=Math.round(arr1[1]+(arr2[1]-arr1[1])*pos)
    
var b=Math.round(arr1[2]+(arr2[2]-arr1[2])*pos)
    effect.element.style.backgroundColor
="#"+r.toColorPart()+g.toColorPart()+b.toColorPart()
}

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


/****************************************************/
// 透明度,这个上个贴过了   by Go_Rush(阿舜) from http://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
函数进来, 用来在效果执行完毕后,打扫战场,恢复一些设置。
这些效果是可以重叠的,大家可以看看下面我写的例子。

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

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

全部代码附范例