POPSブログ

jQuery 伸縮するパネル/4

143

  Category:  jquery2012/09/06 pops 

角丸陰影画像を外周に配置した「伸縮するパネル」を利用して伸縮する「LightBox」の「シミュレーション」を行います。


jQuery 伸縮するパネル4「LightBox」シミュレーション

JS設定の変更でどのように変化するかを確認するための、シミュレーションです。


画像とともに伸縮する「LightBox」の、シミュレーション


下の画像を「クリック」ください。拡大して表示します。


以下の条件の「切り替え変更」が、シミュレーションできます。

MOVE/FADE 位置切替 スケール 速度切替 レーヤー色
move
center
拡大無
600
#000000
  • MOVE
  • FADE
  • 画像
  • 中央
  • 標準
  • 拡大
  • 標準
  • 遅く
  • 黒色
  • 白色

注意。FADEの場合、位置切替は center のみになります。IE6には対応していません。

ワイド画面の場合、スケールの「拡大」を指定すると「車画像」が暴走体当たりして、「LED画面」両サイドが破損することがあります。(モシ破損された場合は「カットバン」などを貼り付け、最寄の消防署にご相談ください。)


1. この「LightBox」は「MOVE」させるために制作されたもので、原則「FADE」タイプはありません。
2. 位置切替でサムネールの位置、中央位置の指定が可能です。
3. Overlayの色及び透明度は、CSSで設定ください。
4. 詳しい説明などは、下記の記事を参照ください。



【参考 MOVEタイプLightBox】当方の記事: jQuery 伸縮するパネル3


以上です。


[ この記事のURL ]


タグ:jquery , LightBox , photo , series

[ jQuery 伸縮するパネル シリーズ記事 ]

jQuery 伸縮するパネル/72012.10.10
jQuery 伸縮するパネル/62012.09.07
jQuery 伸縮するパネル/52012.09.07
jQuery 伸縮するパネル/42012.09.06
jQuery 伸縮するパネル/32012.09.06
jQuery 伸縮するパネル/22012.09.02
jQuery 伸縮するパネル/12012.09.02

 

ブログ記事一覧



[1]