如何写一个通用的JavaScript效果库！(2/2)_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

如何写一个通用的JavaScript效果库！(2/2)_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 07:15 PM

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

Position={  
             cumulativeOffset: function(element) { 
                var valueT = 0, valueL = 0; 
                do { 
                  valueT += element.offsetTop  || 0; 
                  valueL += element.offsetLeft || 0; 
                  element = element.offsetParent; 
                } while (element); 
                return [valueL, valueT]; 
            } 
        }         
    } 
})()

/**//* 
    1.读取/设置 透明度, 
    2.如果只传了一个参数element,则返回 element的透明度 (0<value<1) 
    3.如果传了两个参数 element和value 则把element的透明度设置为value  value范围 0-1 
     
*/ 
function Opacity(element,value){ 
    //by Go_Rush(阿舜) from http://ashun.cnblogs.com/ 
    var ret; 
    if (value===undefined){   //读取 
        if (!/msie/i.test(navigator.userAgent)) 
            if (ret=element.style.opacity) return parseFloat(ret);           
        try{return element.filters.item('alpha').opacity/100}catch(x){return 1.0} 
    }else{                   //设置         
        value=Math.min(Math.max(value,0.00001),0.999999)    //这句修复一些非ie浏览器opacity不能设置为1的bug 
        if (/msie/i.test(navigator.userAgent)) return element.style.filter="alpha(opacity="+value*100+")" 
        return element.style.opacity=value         
    } 
}

Effect        =Class.create(); 
Effect.Fn    =new Object(); 
Effect.Init =new Object();

Effect.prototype={ 
    //by Go_Rush(阿舜) from http://ashun.cnblogs.com/ 
     
    initialize: function(element,options) { 
        this.element  = $(element); 
            this.options  = options || {}; 
         this.duration = (this.options.duration || 2) * 1000;   //效果执行时间 
        this.fps      = this.options.fps || 50;                 //频率 
           this.steps    = Math.floor(this.duration/this.fps);   //当前步长，注： 这个变量是递减的，当它0的时候意味着整个效果结束 
        this.maxSteps = this.steps;             //整个效果的步长 
        this.setting  = new Object();   
        this.timer    = null;

if (this.options.delay){    // 延时处理 
             var _this=this; 
             setTimeout(function(){ 
                 _this.setup(_this); 
                (_this.options.onStart || Prototype.emptyFunction)(_this); 
                 _this.run(); 
                }, _this.options.delay*1000); 
        }else{ 
            this.setup(this); 
            (this.options.onStart || Prototype.emptyFunction)(this);         
            this.run();       
        } 
   }, 
   run: function() { 
        if (this.isFinished())  return (this.options.onComplete || Prototype.emptyFunction)(this); 
        if (this.timer)   clearTimeout(this.timer); 
        this.duration -= this.fps; 
        this.steps--;                            
        var pos=1-this.steps/this.maxSteps    ;    //总进度的百分比 
        this.loop(this,pos);     
        (this.options.onUpdate || Prototype.emptyFunction)(this,pos);       
        this.timer = setTimeout(this.run.bind(this), this.fps); 
   }, 
   isFinished: function() {  
           return this.steps <= 0; 
   }, 
   setup:function(effect){       //初始化设置所有效果单元 
           for(var key in Effect.Init){ 
            if (typeof(Effect.Init[key])!="function") continue; 
            try{Effect.Init[key](this)}catch(x){} 
        } 
    }, 
   loop:function(effect,pos){           //执行所有效果单元 
        for(var key in Effect.Fn){ 
            if (typeof(Effect.Fn[key])!="function") continue; 
            try{Effect.Fn[key](effect,pos)}catch(x){} 
        } 
   } 
}

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

// 移动， 这里是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.top =effect.setting.top  + (effect.options.y-effect.setting.top ) * pos +"px"; 
    effect.element.style.left=effect.setting.left + (effect.options.x-effect.setting.left) * pos +"px"; 
     
} 
/**//****************************************************/

/**//****************************************************/ 
// zoom 
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, 改变到指定大小 
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"; 
} 
/**//****************************************************/

/**//****************************************************/ 
// 背景色 
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() 
} 
/**//****************************************************/

/**//****************************************************/ 
// 透明度，这个上个贴过了 
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);     
} 
/**//****************************************************/

function foo1(){ 
    new Effect("div1",{bgcolor:"#3a3e3f"}) 
}

function foo2(){ 
    new Effect("div1",{w:150,h:100}) 
}

function foo3(){ 
    new Effect("div1",{x:100,y:100}) 
}

function foo4(){ 
    new Effect("div1",{opacity:0.2}) 
}

function foo5(){ 
    new Effect("div1",{zoom:2}) 
}

function foo6(){ 
    new Effect("div1",{w:222,h:111,onComplete:function(){ 
            new Effect("div1",{x:100,y:300,onComplete:function(){ 
                new Effect("div1",{opacity:0.7,onComplete:function(){ 
                    new Effect("div1",{zoom:2,onComplete:function(){ 
                        new Effect("div1",{bgcolor:"#111111",onComplete:function(){                 
                            alert("all done") 
                        }}) 
                    }}) 
                }}) 
            }}) 
        }}) 
}

function fix1(){ 
    new Effect("div1",{zoom:4,opacity:0,x:0,y:0,onComplete:function(eff){ 
        eff.element.style.display="none" 
    }}) 
}

function fix2(){ 
    new Effect("div1",{y:80,h:22}) 
}

function fix3(){   //注意这种复合   
    new Effect("div1",{h:22,onComplete:function(eff){ 
            new Effect("div1",{w:0}) 
    }}) 
    new Effect("div1",{opacity:0,duration:4})

}

function fix4(){ 
    new Effect("div1",{opacity:0,zoom:0}) 
}

function fix5(){ 
    new Effect("div1",{bgcolor:"#000000",onComplete:function(){ 
        new Effect("div1",{bgcolor:"#ffffff"}) 
    }}) 
}

var i=0; 
function fix6(){ 
    if (++i>5) return false; 
    new Effect("div1",{x:280,delay:0.5,duration:0.1,onComplete:function(){ 
        new Effect("div1",{x:320,duration:0.1,onComplete:function(){         
            new Effect("div1",{x:280,duration:0.1,onComplete:function(){         
                new Effect("div1",{x:320,duration:0.1,onComplete:function(){         
                    new Effect("div1",{x:280,duration:0.1,onComplete:function(){         
                        new Effect("div1",{x:300,duration:0.1,onComplete:function(){     
                            fix6()     
                        }})         
                    }})         
                }})         
            }})                     
        }})         
    }}) 
}

</script> 
<fieldset> 
<legend>单一效果</legend> 
<button onclick="javascript:foo1()">颜 色 foo1</button>  
<button onclick="javascript:foo2()">大 小 foo2</button>  
<button onclick="javascript:foo3()">位 置 foo3</button>  
<button onclick="javascript:foo4()">透 明 度 foo4</button>  
<button onclick="javascript:foo5()">Zoom foo5</button>  
<button onclick="javascript:foo6()">所有 foo6</button>

</fieldset>

<fieldset> 
<legend>复合效果</legend> 
<button onclick="javascript:fix1()"> 淡出fix1</button>  
<button onclick="javascript:fix2()"> 折起fix2</button>  
<button onclick="javascript:fix3()"> 慢慢变小消失 fix3</button>  
<button onclick="javascript:fix4()"> 慢慢变小消失2 fix4</button>  
<button onclick="javascript:fix5()"> 变色 fix5</button>  
<button onclick="javascript:fix6()"> 震动5次 fix6</button>

</fieldset>

<button onclick="javascript:location.reload()"> 每次效果后按这里恢复</button>

注意 FireFox 不支持 Zoom

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Python vs. JavaScript：开发人员的比较分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型，适合科学计算和数据分析。2.JavaScript采用弱类型，广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势，选择时应根据项目需求决定。

Python vs. JavaScript：选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型：1)数据科学和自动化任务选择Python；2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐，而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。

JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。

JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。

Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

JavaScript框架：为现代网络开发提供动力May 02, 2025 am 12:04 AM

JavaScript框架的强大之处在于简化开发、提升用户体验和应用性能。选择框架时应考虑：1.项目规模和复杂度，2.团队经验，3.生态系统和社区支持。

JavaScript，C和浏览器之间的关系May 01, 2025 am 12:06 AM

引言我知道你可能会觉得奇怪，JavaScript、C 和浏览器之间到底有什么关系？它们之间看似毫无关联，但实际上，它们在现代网络开发中扮演着非常重要的角色。今天我们就来深入探讨一下这三者之间的紧密联系。通过这篇文章，你将了解到JavaScript如何在浏览器中运行，C 在浏览器引擎中的作用，以及它们如何共同推动网页的渲染和交互。JavaScript与浏览器的关系我们都知道，JavaScript是前端开发的核心语言，它直接在浏览器中运行，让网页变得生动有趣。你是否曾经想过，为什么JavaScr

See all articles