簡単・軽量！画像ズームjQueryプラグイン「Zoom」
twitter facebook hatena google pocket ECなど表示スペースは限られているものの商品の細かい部分は見せたいという要望があると思います。 これを簡単・軽量なjQuery image zooming pluginが解決してくれます。 sponsors jQuery image zooming pluginからファイル一式をダウンロード。 <style> .zoomIcon { width:33px; height:33px; position:absolute; top:0; right:0; background:url(icon.png); } .zoom { position:relative; } .zoom amp-img { display: block; } </style> <script type="text/javascript" src
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
設置サンプル
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-eq
画像のズーム効果、画像の一部を拡大表示｜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ページを開く
ECサイトで使えそうなjQueryプラグイン snipe.js
ECサイトで使えそうなjQueryプラグイン elevatezoom | ECサイト｜システム開発会社｜スターフィールド
