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

まずは使い方を見てみましょう。
デモのアドレス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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。