如何写一个通用的JavaScript效果库！(2/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 函数进来，用来在效果执行完毕后，打扫战场，恢复一些设置。这些效果是可以重叠的，大家可以看看下面我写的例子。写了十来个例子，应该很详细了。完整的，可调试代码和例子如下：单一效果颜色 foo1 大小 foo2 位置 foo3 透明度 foo4 Zoom foo5 所有 foo6 复合效果淡出fix1 折起fix2 慢慢变小消失 fix3 慢慢变小消失2 fix4 变色 fix5 震动5次 fix6 每次效果后按这里恢复注意 FireFox 不支持 Zoom Go_Rush(阿舜) [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Array.prototype.sort方法是对数组进行排序, 该方法带一个函数参数,用来指定排序的规则. 我们先来看看sort 的简单应用: var arr=[2,1,3,4]; alert(arr.sort()) // [1,2,3,4] 从小到大排列 //现在由大到小排列得>>>详细阅读

本文标题：如何写一个通用的JavaScript效果库！(2/2)

地址：http://www.17bianji.com/kaifa2/JS/30569.html

1/2 1