如何写一个通用的JavaScript效果库!(2/2)

 更新时间:2007年04月12日 00:00:00   作者:  
在上个随笔中贴出了效果库的整体框架,和一个简单的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
函数进来, 用来在效果执行完毕后,打扫战场,恢复一些设置。
这些效果是可以重叠的,大家可以看看下面我写的例子。
写了十来个例子,应该很详细了。
完整的,可调试代码和例子如下:

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

相关文章

  • JS跳出循环的5种方法总结(return、break、continue、throw等)

    JS跳出循环的5种方法总结(return、break、continue、throw等)

    想必大家都遇到过循环遍历时遇到满足条件的时候就跳出循环这样的需求,于是整理了一篇各种循环是如何结束的,这篇文章主要给大家介绍了关于JS跳出循环的5种方法,分别是return、break、continue、throw等的相关资料,需要的朋友可以参考下
    2024-05-05
  • 一文了解你不知道的JavaScript异步篇

    一文了解你不知道的JavaScript异步篇

    这篇文章主要为大家详细介绍了一些你不知道的JavaScript异步相关知识,文中的示例代码讲解详细,对我们学习JavaScript有一定帮助,感兴趣的可以跟随小编一起学习一下
    2022-11-11
  • html a标签-超链接中confirm方法使用介绍

    html a标签-超链接中confirm方法使用介绍

    confirm可以弹出确定取消对话框,然后根据用户的选择执行相应的操作,接下来介绍实现过程,需要了解的朋友可以参考下
    2013-01-01
  • ES6中的Promise对象与async和await方法详解

    ES6中的Promise对象与async和await方法详解

    Promise是es6引入的异步编程薪解决方案,语法上promise就是一个构造函数,用来封装异步操作病可以获取其成功或失败的结果,这篇文章主要介绍了ES6中的Promise对象与async和await方法,需要的朋友可以参考下
    2022-12-12
  • js实现简易计算器小功能

    js实现简易计算器小功能

    这篇文章主要为大家详细介绍了js实现简易计算器小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • javascript计算渐变颜色的实例

    javascript计算渐变颜色的实例

    这篇文章主要介绍了javascript计算渐变颜色的实例的相关资料,希望通过本文能帮助到大家,让大家理解掌握这部分内容,需要的朋友可以参考下
    2017-09-09
  • bootstrap laydate日期组件使用详解

    bootstrap laydate日期组件使用详解

    这篇文章主要为大家详细介绍了bootstrap laydate日期组件使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • Javascript中call与apply的学习笔记

    Javascript中call与apply的学习笔记

    经常看到这俩哥们,看来看去都是讲他们的区别,一直没搞太清楚作用究竟是什么,现在记录下自己理解,有错的话希望指出!
    2014-09-09
  • JS实现的手机端精简幻灯片效果

    JS实现的手机端精简幻灯片效果

    这篇文章主要介绍了JS实现的手机端精简幻灯片效果,涉及javascript结合时间函数动态修改页面元素的相关技巧,需要的朋友可以参考下
    2016-09-09
  • JS实现页面长时间不操作退出到登录页面的示例代码

    JS实现页面长时间不操作退出到登录页面的示例代码

    这篇文章主要介绍了JS实现页面长时间不操作退出到登录页面的示例代码,通过在head标签中引入jquey和页面长时间不操作的js页面,结合实例代码讲解的非常详细,需要的朋友可以参考下
    2024-03-03

最新评论