Anything Zoomer | Usage
AnythingZoomer2 Download Sections: Basics | HTML | CSS | Parameters | Methods | Callbacks ^ Basics This is a jQuery plugin, so you'll need to load the jQuery library first, then the plugin file, then invoke the new function on the area you wish to have zooming. There is a specific HTML structure and some required CSS to have all this work correctly, so read on. The full list of parameters is also
ショッピングサイトに使えそうなJqueryプラグイン「elevateZoom」 | SHINGO IRIE
ECサイトでよくみかけるような、マウスオーバーでの写真拡大機能を実装できるJqueryプラグイン「elevateZoom」。商品によっては使いドコロが多そうです。 拡大パターンもいろいろ マウスオーバーすると、横に拡大表示されます。 マウスオーバーしたところだけ、虫眼鏡のように拡大されるパターンもあり。 導入方法まず、スクリプトを読み込みます。 <script src='jquery-1.8.3.min.js'></script> <script src='jquery.elevateZoom-2.5.5.min.js'></script> <img id="zoom_01" src='images/small/拡大前.jpg' data-zoom-image="images/large/拡大後.jpg"/> 拡大前の画像と、拡大後の画像を準備して上記のように記述します。 最後に、実行する
画像のズーム効果、画像の一部を拡大表示｜jQuery plugin｜Ajax｜PHP & JavaScript Room
jQueryを使用して、簡単に画像にズーム効果を付ける方法が掲載されています。 使用する画像は原寸大の画像1枚。 img要素のwidth/height属性にサムネイル表示時のサイズを指定しておきます。 サムネイル画像にマウスがのった時に、画像をサムネイル表示時よりCSSで画像サイズを25%大きくするアニメーションを行い、z-indexをあげて他の要素より上に表示するようにしています。 マウスが離れた時に、CSSで画像サイズを元のサイズに戻すアニメーションを行い、z-indexを元に戻す方法がとられています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
