jquery_jquery に基づく画像ホバープラグイン-jsチュートリアル-php.cn

jquery_jquery に基づく画像ホバープラグイン

WBOY

リリース： 2016-05-16 18:28:48

オリジナル

1037 人が閲覧しました

まずは使い方を見てみましょう。
デモのアドレスhttp://demo.jb51.net/js/jCutter_jquery/demo.htm
HTML ファイルは次のようになります:

コードをコピーしますコードは次のとおりです:

クリック後のページの内容です

呼び出すには、次のように記述する必要があります:

コードをコピーしますコードは次のとおりです。

 $(document).ready(function(){ 
options={ 
'speedIn':600, //画像が 
'speedOut に入ったときのアニメーション速度':400, //画像が終了するときのアニメーション Speed
'easeIn':'easeOutBounce', //画像が開始するときのアニメーション効果 この効果にはイージング ライブラリが必要です
'easeOut':'' //アニメーション画像が終了するときの効果
} 
 $('.jcutter').jCutter(options); 
}) 

 

もちろん、このプラグインを引用する必要があります。このプラグインの書き方を説明していきます。
1. jQuery プラグインの作成方法
jQuery プラグインを作成するには、以下に示すように、まず必要な構造が必要です。

コードをコピーしますコードは次のとおりです:

(function($){ 
$.fn.jCutter = function(o){ 
o = $.extend({ 
speedIn: 300, 
speedOut: 300, 
easeIn: '', 
easeOut: '' 
}, o || 
); }; 
})(jQuery ); 

 

この構造は最終結果とは少し異なりますが、一般的な jQuery プラグインの構造は次のとおりです。
まず名前空間を汚さずにクロージャの形式で記述し、次に jQuery が提供するインターフェースに従って記述します。ここでの jCutter は独自のプラグインの名前に変更できます。 $.extend は非常に興味深い関数で、最初と 2 番目のパラメーターを組み合わせて、両方のパラメーターに含まれる値を後者で置き換えます。
2. 記述を開始します
この例では、セレクターを使用する必要があるため、いくつかの修正を加えて構造を次のように変更します。

コードをコピーコードは次のとおりです。

(function($){ 
 $.jCutter = function(node, o){ 
o = $.extend({ 
speedIn: 300, 
speedOut: 300, 
easeIn: '', 
easeOut: '' 
 }, o {}); 
var that = this; 
that.generate = function(){ 
 }; 
that.cutter = function(){ 
}; 
$.fn.jCutter = function(o){ 
 this.each (function(i){ 
$.jCutter(this,o); 
})(jQuery); $.jCutter jQueryにクラスを追加して、より便利に操作できるようにするという意味です。上記の構造を見ると、プログラムのロジックが init() を使用していくつかの初期化タスクを実行し、次にgenerate() を使用して必要な構造を生成し、最後にカッター() を使用してアニメーションとイベントを完了していることがわかります。効果。 
3. 初期化手順 
初期化する必要があるのは主にいくつかのパラメータであり、次に変更が必要な画像を見つけて、最後にレンダリングします。どれも比較的簡単な操作です。 




コードをコピー

コードは次のとおりです。

that.init = function(){

that .node = $(node); that.img = that.node.find('img'); that.speedIn = o.speedIn; that.speedOut = o.speedOut ; that.easeIn = o.easeOut; that.cutter(); 🎜> 4. 必要な構造を生成します

この効果の原理は、画像を 4 つのレイヤーにコピーし、4 つのレイヤーを相対的に配置してから、画像を組み合わせることで、アニメーション効果が得られます。達成。

コードをコピー

コードは次のとおりです:

 
that.generate = function(){ 
var w = that.node.width() / 2; 
var h = that.node.height() / 2; 
that.imga = []; 
for (var i = 0; i that.imga[i] = document.createElement('div'); 
that.imga[i] = $(that.imga[i]); 
that.imga[i].css({ 
'位置': '絶対', 
'z-index': '2', 
'幅': w, 
'高さ': h, 
'背景': 'url("' that.img.attr("src") '") no-repeat' 
}); 
$(that.node).append(that.imga[i]); 
} 
that.imga[0].css({ 
'left': '0px', 
'top': '0px' 
}); 
that.imga[1].css({ 
'right': '0px', 
'top': '0px', 
'background-position': '-' w 'px ' ' 0px' 
}); 
that.imga[2].css({ 
'left': '0px', 
'bottom': '0px', 
'background-position': '0px' ' -' h 'px' 
}); 
that.imga[3].css({ 
'right': '0px', 
'bottom': '0px', 
'background-position': '-' w 'px ' '-' h 'px' 
}); 
that.img.remove(); 
}; 

ここの位置コードも、最初に外側の層の高さと高さを取得してから計算し、再度 4 つの層を作成し、4 つの層に対応する位置コードを書き込むため、注意が必要です。ここでは、対応する html コードを直接書き込むこともできますが、わかりやすくするために、説明者の書き込み方法を採用し、最初に div を作成してから、ここに配置する必要があります。
五、アニメーションエフェクトの追加、イベント処理プログラムへの注釈
は構造のタスクを完了しました。次のステップはアニメーションエフェクトの追加です。この 4 つの図層をマウスで保存するだけです。過ぎ去った季節は外の層を移し、しかしネズミが堇离开の時間に再び位置することができ、書き来ても常にある简单、看代：

复制代代码如下:

 
that.cutter = function(){ 
var w = that.node.width() / 2; 
var h = that.node.height() / 2; 
that.node.hover(function(){ 
that.imga[0].stop().animate({ 
'left': '-' w, 
'top': ' -' h 
}, that.speedOut, that.easeOut); 
that.imga[1].stop().animate({ 
'right': '-' w, 
' top': '-' h 
}, that.speedOut, that.easeOut); 
that.imga[2].stop().animate({ 
'left': '-' w, 
'bottom': '-' h 
}, that.speedOut, that.easeOut); 
that.imga[3].stop().animate({ 
'right': ' -' w, 
'bottom': '-' h 
}, that.speedOut, that.easeOut) 
}, function(){ 
that.imga[0].stop( ).animate({ 
'left': 0, 
'top': 0 
}, that.speedIn, that.easeIn); 
that.imga[1].stop(). animate({ 
'right': 0, 
'top': 0 
}, that.speedIn, that.easeIn); 
that.imga[2].stop().animate( { 
'左': 0, 
'下': 0 
}, that.speedIn, that.easeIn); 
that.imga[3].stop().animate({ 
'right': 0, 
'bottom': 0 
}, that.speedIn, that.easeIn) 
}) 
}; 

.stop() 関数の作用は、イベントが再度発生したときに、前のアニメーションも実行中に停止し、アニメーションを停止することにより、このような効果がより自然に得られます。 .easeOut パラメータは、アニメーションのモードを設定するために使用され、承認されている jQuery クラスには 2 つの単純な線形性があり、以下に jQuery.easing クラスをロードして、より多くの効果を追加できます。完全な代码如下:

复制代码代码如下:

 
(function($){ 
$.jCutter = function(node, o){ 
o = $.extend({ 
speedIn: 300, 
speedOut: 300, 
easeIn: '', 
easeOut: '' 
}, o || {}); 
var that = this; 
that.init = function(){ 
that .node = $(node); 
that.img = that.node.find('img'); 
that.speedOut = o.speedOut; >that.easeIn = o.easeIn; 
that.generate(); 
that.generate = function(){ 
var w = that.node.width() / 2; 
var h = that.node.height() / 2; 
that.imga = []; (var i = 0; i that.imga[i] = document.createElement('div'); 
that.imga[i] = $(that.imga[i] ]); 
that.imga[i].css({ 
'位置': '絶対', 
'z-index': '2', 
'幅': w, 
'高さ': h, 
'背景': 'url("' that.img.attr("src") '") no-repeat' 
});ノード).append(that.imga[i]); 
} 
that.imga[0].css({ 
'left': '0px', 
'top': '0px ' 
}); 
that.imga[1].css({ 
'右': '0px', 
'上': '0px', 
'背景位置' : '-' w 'px' ' 0px' 
}); 
that.imga[2].css({ 
'left': '0px', 
'bottom': '0px', 
'background-position': '0px' ' -' h 'px' 
}); 
that.imga[3].css({ 
'right': '0px', 
'bottom': '0px', 
'background-position': '-' w 'px ' '-' h 'px' 
}); 
that.img.remove(); 
}; 
that.cutter = function(){ 
var w = that.node.width() / 2; 
var h = that.node.height() / 2; 
that.node.hover(function(){ 
that.imga[0].stop().animate({ 
'left': '-' w, 
'top': ' -' h 
}, that.speedOut, that.easeOut); 
that.imga[1].stop().animate({ 
'right': '-' w, 
' top': '-' h 
}, that.speedOut, that.easeOut); 
that.imga[2].stop().animate({ 
'left': '-' w, 
'bottom': '-' h 
}, that.speedOut, that.easeOut); 
that.imga[3].stop().animate({ 
'right': ' -' w, 
'bottom': '-' h 
}, that.speedOut, that.easeOut) 
}, function(){ 
that.imga[0].stop( ).animate({ 
'left': 0, 
'top': 0 
}, that.speedIn, that.easeIn); 
that.imga[1].stop(). animate({ 
'right': 0, 
'top': 0 
}, that.speedIn, that.easeIn); 
that.imga[2].stop().animate( { 
'左': 0, 
'下': 0 
}, that.speedIn, that.easeIn); 
that.imga[3].stop().animate({ 
'right': 0, 
'bottom': 0 
}, that.speedIn, that.easeIn) 
}) 
}; 
that.init(); 
}; 
$.fn.jCutter = function(o){ 
return this.each(function(i){ 
$.jCutter(this,o); 
}); 
}; 
})(jQuery); 

 
 非常に興味深い効果、明確な、コードも単純で、手作りの良いものです。 /26031.html

jquery_jquery に基づく画像ホバー プラグイン

jquery_jquery に基づく画像ホバープラグイン