ホームページ  >  記事  >  ウェブフロントエンド  >  画像注釈を使用したフェードインおよびフェードアウト プラグインの作成方法を段階的に説明します (3)_JavaScript スキル

画像注釈を使用したフェードインおよびフェードアウト プラグインの作成方法を段階的に説明します (3)_JavaScript スキル

WBOY
WBOYオリジナル
2016-05-16 18:18:511016ブラウズ

実際、以前の適切なコード構造を使用すると、コントローラーを追加するのは非常に簡単です (^_^ 初期アーキテクチャのコード構造が非常に重要だと述べたのはこのためです!)
最初にアイデアについて話しましょうコントローラーの追加:
カルーセル要素の数に応じて、対応するコントロール ボタンを各要素に追加します (ここでは a タグを直接使用して実行していますが、セマンティクスを考慮する場合は、ul または ol を使用できます) , 書き方の利便性を考慮して、最初にコントローラーの親タグを作成し、次に各コントロール ボタンをコントローラーの親タグに順番に追加してから、親タグをカルーセル モジュールに追加できます。次に、対応する CSS スタイルを対応する要素に追加します
さて、アイデアについて話した後、コントローラーの描画を init() に含める必要があります。したがって、次のように記述できます:

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

init: function(options) { //options パラメータ: id (必須): 画像リストの親タグ ID; auto (オプション): 自動実行時間; インデックス (オプション): 開始画像のシリアル番号
var wp = H$(options . id), // 画像リストの親要素を取得します
ul = H$$('ul',wp)[0], //
li = this.li = H$$('li ', ul);
this.a = options.auto?options.auto:2; //自動実行間隔
this.index = options.position?options.position:0; running (0 から開始)
this.l = li.length;
this.cur = this.z = 0; //現在表示されている画像番号&&z-index 変数
nav_wp = document.createElement('div '); // まず、コントローラーの親タグとして div を作成します。
nav_wp のセマンティクスを使用することもできます。 .style.cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;' //スタイルを設定します
/* ==フェードインおよびフェードアウト機能を追加します==*/
for(var i =0;ithis.li[i].o = 100; //各画像の透明度の変更を設定します
this.li[i] .style. opacity = this.li[i].o/100; //IE 以外の場合は、 opacity
this.li[i].style.filter = 'alpha(opacity=' this.li[ i].o ' )'; //IE はフィルターを使用します
/* == 描画コントローラー == */
var nav = document.createElement('a'); //ここでは a を直接使用します。セマンティクスを考慮する場合は、li
nav.className = options.navClass?options.navClass:'fader-nav'; //コントローラー クラス、デフォルトは 'fader-nav'; タグを使用してコントローラーを制御することもできます。 🎜>nav.innerHTML = i 1;
nav.onclick = new Function(this.anchor '.pos(' i ')'); // onclick イベントをバインドし、以前に作成した pos() 関数を直接呼び出します。 🎜>nav_wp.appendChild(nav);
}
wp.appendChild(nav_wp) //コントローラーはページに追加します
this.pos(this.index); },


上記のコードは、コントローラーを追加した後の完全な init() であり、合計 7 行のコードが追加されます。
これを書いていると、試してみたいと思った友人もいるかもしれませんが、追加したコントローラーが表示されないことに気づきました。 。 。
あはは、忘れないでください。画像の表示と非表示を制御するために z-index を使用します。他の人の z-index は最初から 1 つずつ増加し続けますが、コントローラーのデフォルトの z-index は 0 だけです。が構築されていますが、もちろんそれを表示することはできません。したがって、このコントローラーの Z インデックスを制御するコードをもう 1 行追加する必要があります。そのため、常にカルーセル要素の一番上に表示されます。
そこで、変換関数 pos() で、



コードをコピー コードは次のとおりです。 pos:function(i){
clearInterval(this.li.a) //自動変更タイマーをクリア
clearInterval(this.li[i].f);フェード エフェクト タイマー
this.z ;
this.li[i].style.zIndex = this.z; //毎回次の画像の z-index を 1 ずつ増やします。 zIndex = this. z 1; // コントローラーの z インデックスは、カルーセル要素の最大の z インデックスよりも 1 大きい必要があります。
this.cur = i; // 正しいシリアル番号をバインドします。現在表示されている画像の
this.li .a = false //クリアタイマーが完了したことを示すマークを作成します
//this.auto(); run
if(this.li[i].o> ;=100){ //フェードインする前に画像の透明度を透明に設定します
this.li[i].o = 0; [i].style.opacity = 0;
this.li[i].style.filter = 'alpha(opacity=0)';
}
this.li[i].f = setInterval (new Function(this.anchor '.fade(' i ')'),20);
},


上記のコードは、実際には 6 行目に 1 つの文を追加するだけです。
これら 8 つの追加文とそれに対応する CSS により、コントローラーが形になり始めました。コントローラーの CSS は次のとおりです



コードをコピーします
コードは次のとおりです:.fader-nav{表示:インライン ブロック;マージン右:8px;カラー:#fff;パディング:2px 6px;背景:#333;ボーダー:1px ソリッド #fff;フォントファミリー:タホマ;フォントの太さ:太字;フォント サイズ: 12px;カーソル: ポインタ;}
プロトタイプの効果を見てみましょう。

[Ctrl A すべて選択 注:
外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

現在のコントローラーのスタイルが欠落していることに気づきましたか?したがって、2 つの文を追加する必要があります。1 つは init()
this.curC = options.curNavClass?options.curNavClass:'fader-cur-nav'; // pos( でコントローラーの現在のスタイル変数を定義します) ) pos() 内の対応する
に割り当てます:
for(var x=0;xnav_wp.getElementsByTagName('a')[x ].className = x==i?this.curC:'fader-nav'; // 現在のコントローラー スタイルをバインドします
}
これに加えて現在の状態の CSS スタイル:
.fader-cur-nav {display:inline-block;margin-right:8px;color:#fff;padding:2px 6px;background:#ff7a00;border:1px Solid #fff;font-family:Tahoma;font -weight:bold;font-size :12px;cursor:pointer;}
これで基本的にはOKです。効果を見てみましょう:
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]
Well, okay, the above effect is actually enough in most cases, but some friends have more needs and want to add a picture note layer at the bottom. This function will be implemented in the next part!
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。