JQueryプラグイン制作実践 xMarqueeプラグイン V1.0

JQueryプラグイン制作実践 xMarqueeプラグイン V1.0_jquery

WBOY

リリース： 2016-05-16 18:30:43

オリジナル

1138 人が閲覧しました

プラグインの要件
1. リスト内の要素を左右に移動します (上下の方向は同じです。CSS を使用してリスト要素のフロート方向を制御します)
2.要素にマウスを移動します要素が強調表示されると (CSS 制御されます)、プレーヤーはスクロールを停止します。離れた後もレースを続けてください。。
3. オプションの左右の手動ナビゲーションボタン。
jquery_xmarquee_m18
実装の原則
リストの末尾の要素を最初の要素の前に移動するだけです。
将来の拡張 (将来必要になるかどうかを確認してください)
移動後のコールバック関数を使用すると、複数の要素が同時に移動します。アルバムプラグイン、興味があれば書き留めてください)。開発者は、「機能する可能性がある最も単純なことを実行してください!」という 1 つの文を覚えておく必要があります。最もシンプルで使いやすいものを作り、過剰なデザインはしないでください。
xMarquee API 説明
1. DOM 仕様
以下のソースコードを参照してください~ 2. CSS の例
以下のソースコードを参照してください~
3. メインメソッド呼び出し

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

プラグインのソースコード

コードをコピー

コードは次のとおりです。 (関数) ($) { // プライベート関数 . var p = {};

p.stop = function(evt) { if (evt) { $(this).addClass(p._opts.on) ); }; window.clearInterval(p._intervalID ) };

p.slide = function() { 
if (p._opts.dir == 1) ":last").hide().fadeIn (p._opts.fadein).prependTo(p._t); 
} else { 
if (p._opts.vnum < p._cnt) { 
p._i.filter(":first ").fadeOut(p._opts.fadeout).appendTo(p._t); 
p._i.filter(":eq(" p._opts.vnum " )").fadeIn(p._opts.fadein ); 
} else { 
p._i.filter(":first").hide().appendTo(p._t).fadeIn(p._opts .fadein); 
}; 
p._i = $(p._opts.i, p._t); ._i.filter(":gt(" ( p._opts.vnum - 1) ")").hide() 
}; //スライド 
p.go = function(evt) { 
p.stop(); 
if (evt) { 
$(this).removeClass(p._opts.on); 
p._intervalID = window.setInterval( ) { p.slide(); }, p ._opts.interval); //go 
//メインのプラグイン本体 
$.fn.xMarquee = function(options) { 
 // オプションを設定します。 
options = $.extend({}, $.fn.xMarquee.defaults, options); 
p._opts = options; // 一致した要素を調べて戻ります。 jQuery オブジェクト。
return this.each (function() { 
//注: 複数のマーキー インスタンスをサポートしたい場合は、$(this).data("v",v) p._t = this; //マーキーターゲット; 
//シルドアイテム 
p._i = $(p._opts.i, p._t); .size(); 
p._intervalID = null; 
//不要な項目を非表示 
p._i.filter(":gt(" (p._opts.vnum - 1) ")" Hide(); 
p._i.hover(p.stop, p.go); 
//ボタン登録 
$(p._opts.btn0).click(function(evt) _opts.dir = 0; p.slide(); }).mouseout(p.go); p._opts.dir = 1; p.stop (); p.slide(); return false }).mouseout(p.go); 
}); 
// パブリックデフォルト。
$.fn.xMarquee.defaults = { 
on: 'cur', 
i: 'li', / /slide items css selector 
interval: 5000 , 
fadein: 300, 
fadeout: 200, 
vnum: 4, // 表示可能なマーキー項目 
dir: 1, // マーキーの方向。 1=右;0=左; 
 btn0: '.prev', //前ボタン 
btn1: '.next'//次ボタン 
})(jQuery); 🎜>
 

 パッケージのダウンロード アドレス