[JS]オーバーレイを使って、付加情報をかっこよく見せるjQueryのチュートリアル

オーバーレイを使って、付加情報をアニメーションでかっこよく見せるjQueryのチュートリアルを紹介します。
jQueryといえば、先週末に1.4.3にバージョンアップしましたね。

デモのキャプチャ

Annotation Overlay Effect with jQuery
デモページ

[ad#ad-2]

実装

HTML

HTMLはクリーンでシンプルです。元画像(image_wrap)とオーバーレイ画像(zoom_overlay)をdiv要素で内包します。

[ad#ad-2]

CSS

イメージの幅をアニメーションさせるため、オーバーレイのスタイルはサイズを異なるものにします、元:500px、オーバーレイ:400pxにしています。また、アニメーション用に「.image_wrap > img」に「margin:auto;」を指定するのもポイントです。

JavaScript

エフェクトは元画像を小さくして、その上にオーバーレイの付加情報をアニメーションで表示するというものです。
実装にはjquery.jsを外部ファイルとし、以下のスクリプトを記述します。

まずは、元画像のクリック時を定義します。

最後に、オーバーレイのクリック時を定義します。
オーバーレイの付加情報を消し、元画像のサイズを戻します。

sponsors

top of page

©2018 coliss