ホームページ  >  記事  >  ウェブフロントエンド  >  JS は、画像をクリックして拡大して閉じるという美しい効果を現在の page_javascript スキルで実現します

JS は、画像をクリックして拡大して閉じるという美しい効果を現在の page_javascript スキルで実現します

WBOY
WBOYオリジナル
2016-05-16 17:19:311805ブラウズ

Lightbox JS は、現在のページに画像をオーバーレイするためのシンプルで謙虚なスクリプトです。すぐにインストールでき、すべての一般的なブラウザで動作します。

デモを表示するにはここをクリックしてください。 🎜>使用方法:

ステップ 1 - インストール

1. Lightbox v2.0 は、Prototype フレームワークと Scriptaculous エフェクト ライブラリを使用します。これら 3 つの Javascript ファイルを外部で調整する必要があります。




2. ライトボックス CSS ファイルを外部から読み込みます (または、ライトボックス スタイルを現在のスタイル シートに追加します)。 🎜>
3. CSS を確認し、呼び出された prev.gif ファイルと next.gif ファイルが正しい場所にあることを確認します。また、呼び出されたloading.gif ファイルと close.gif ファイル、および lightbox.js ファイルが正しい場所にあることを確認します。

ステップ 2 -
をアクティブ化する 1. ライトボックスをアクティブ化するには、rel="lightbox" 属性を追加します。 >画像 #1

オプション: title 属性を使用して説明を追加します。2. グループ化する関連画像のセットがある場合は、前の手順を続行して、 rel 属性 Name に角かっこを付けてグループ化します。例:
image #1

image #2
image #3
3. 各ページの写真グループの数と写真グループごとの写真の数に制限はありません。
ダウンロード: Lightbox JS v2.02

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