ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryアコーディオン機能を実現するjqueryプラグイン開発 Sharing_jquery

jqueryアコーディオン機能を実現するjqueryプラグイン開発 Sharing_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
2016-05-16 16:56:03997ブラウズ

はイメージやコンテナに使用でき、使い方は通常のjQueryプラグインの呼び出し方法と同じです。実装原則を理解するのは難しくなく、すべてコードのコメントに記載されています。詳しく知りたい場合は、以下のコードまたはサンプルのデモをご覧ください。

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

;(function($){
/*
* jQuery に基づくシンプルなアコーディオン切り替えプラグイン
*/
$.fn.iAccordion=function(iSet){
var self=this;
iSet=$. extend({type: 'mouseover'、select: 'img'、cur:0、interinterval:100、interval:500、easing: ''}、iset || {});
mouseover、click、mouseleaveなど.
* Select: 切り替える必要がある要素のセットを取得するために使用されるセレクター
* Cur: デフォルトの展開された要素のインデックス
* InitInterval: アコーディオン効果のアニメーション間隔を初期化します
*間隔: マウス イベント アニメーションの間隔時間
* イージング: jQuery.easing のサポートが必要なアニメーション効果。パラメーターについては、jQuery.easing@ http://gsgd.co.uk/sandbox/jquery/easing/ */
var item,boxW,selectW,animateW,sIndex,animateL;
$(self).each(function(){
Position':'relative','overflow':'hidden '});
{'position':'absolute','left':0,'top':0});
boxW=$(this).outerWidth(); > animateW=(box)わ、 selectW)/(item.size()-1); (this).animate({'left':animateW*i 'px'},iSet.InitInterval,iSet.Easing);
.on(iSet.Type ,function(e){//バインド マウス イベント
マウスイベントアニメーションは、要素のインデックス値と現在の要素のインデックス値の大小関係を判断して、現在の要素をアニメーション化してアニメーション的に配置します
n-1) : animateL=animateW*n;
.
}).eq(iSet. Cur).trigger(iSet.Type);
});

電話をかける方法は?
1. 上記のプラグイン コードをページに導入します。
2. $(selectmain).iAccordion({…});
3. 関連するパラメーターと関数については、以下のコメントを参照してください。プラグイン。
ちょっとしたヒントとして、Easing を定義する必要がある場合は、jQuery.easing プラグインをインポートする必要があります。Easing のパラメーターは、easeOutBounce、easeOutQuint などの jQuery.easing のメソッド名です。

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