如何写一个通用的JavaScript效果库！(2/2)_javascript技巧-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Java チュートリアル

1665

CakePHP チュートリアル

1424

Laravel チュートリアル

1322

PHP チュートリアル

1270

C# チュートリアル

1250

Related knowledge

JavaScriptエンジン：実装の比較 Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

Python vs. JavaScript：学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

C/CからJavaScriptへ：すべてがどのように機能するか Apr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptとWeb：コア機能とユースケース Apr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScript in Action：実際の例とプロジェクト Apr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptエンジンの理解：実装の詳細 Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：コミュニティ、ライブラリ、リソース Apr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

Python vs. JavaScript：開発環境とツール Apr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

See all articles