Heim >Web-Frontend >js-Tutorial >如何写一个通用的JavaScript效果库！(2/2)_javascript技巧

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

WBOYOriginal: 2016-05-16 19:15:081130Durchsuche

在上个随笔中贴出了效果库的整体框架，和一个简单的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需刷新才能执行]

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：用javascript父窗口控制只弹出一个子窗口_javascript技巧Nächster Artikel：如何写一个通用的JavaScript效果库

In Verbindung stehende Artikel

Mehr sehen