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

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

WBOY

リリース： 2016-05-16 18:18:50

オリジナル

1131 人が閲覧しました

少なくとも、これがこのシリーズの最後の部分になるはずです。
パート 3 の効果は、基本的にほとんどのニーズを満たしています。したがって、この部分はおまけとしか考えられません。早速、ブログ投稿を続けてみましょう。
実際、背景が半透明のメモのカルーセル効果は、163、qq、淘宝網などのオンラインでも利用できます。注意深く検索すると、同様の効果が表示されるはずです。テキストの追加は、実際には前の記事でコントローラーを追加する方法と似ています。別の要素を追加し、その中にテキストを表示するだけです。

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

 
/* -- メモを表示--* / 
var alt = this.alt = document.createElement('p'); //テキストを表示するための p タグを追加します
this.img = [] 
for(var k=0;kthis.img.push(H$$('img',this.li[k])[0]); //カルーセルモジュール内の画像を抽出することが目的です。 get alt 
} 
.
.
.
wp.appendChild(alt); // 
this.textH = nav_wp.offsetHeight; '高さ:' this.textH 'px;line-height:' this.textH 'px;color:#fff;font-size:12px;padding-left:20px;margin:0;position:absolute;left:0; bottom: 0;overflow:hidden;width:100%;background:#000;opacity:0.7;filter:alpha(opacity=70);' //このレイヤーにスタイルを追加します 

 

上記は init() 関数に 2 つのコードを追加したものです。どれもわかりやすい。詳細には触れません。加えて。また、変換関数の Z インデックス値を変更して、コントローラーが最高レベルのテキストレベルになるようにします。同時に、このテキストレイヤーに代替テキストを書き込みます。スライド効果が必要な場合は、 pos() で高さを 0 にするには、 fade() で高さの変換を行うだけです (top または left を使用することもできます)。したがって、 pos() のコードを次のように変更します。 >
コードをコピー

コードは次のとおりです: this.alt.style.zIndex = this.z 1; nav_wp.style。 zIndex = this.z 2; .

this.alt.style.height = 0; // メモレイヤーのスライド効果を作成します

this.alt.innerHTML = this.img [i].alt; //代替テキストを挿入 

テキストレイヤーに高さの変更効果がある場合は、fade() にテキストレイヤーの高さの変更に関する文を追加するだけです:

コードをコピー

コードは次のとおりです。 this.alt.style.height = Math.ceil( this.li[i].o*this.textH/100) 'px' ; //テキストのスライド効果を作成しますまあ、これでほぼ完了です。最終的な効果を見てみましょう。

ステップ4

[Ctrl A すべて選択注:
外部 Js を導入する必要がある場合は、を実行するために更新する必要があります]
Well, at the end of the article, I almost forgot to mention a very critical point, which is the configuration parameters of options:
When instantiating new Hongru.fader.init(), the second parameter is the configuration parameter. It is an object, and the optional configuration parameters are as follows
{
id: //(required), carousel list parent element id
auto: //(optional) automatic playback interval seconds
navClass: //(optional) Controller className
curNavClass: //(optional) Controller current state className
index: //(optional) From which position to start playing during initialization, the default is 0, that is, the first element
}
Okay, this series ends! ! You can change the source code yourself