scrollimages2/最大数表示陳列棚

まさに今、KURUBUSI.netサイト上部で使用してるscrollimagesとchangeLAYERimageを足した物です。商品の一覧ページなどでは、どうしても場所をとってしまうので、ページ全体が長く伸びてしまったり、単調なイメージになりがちです。そこでscrollimages2を利用すると、省スペースで動的にイメージの陳列が可能です。上のサンプルの状態で計120のイメージを収納しています。大量の商品イメージの陳列に大活躍してくれる代物です。

構造としては、初代scrollboxと同じように、htmlでイメージを包括する空のdivだけを用意し、onloadでjavascriptからgetElementByIdを使い表示させています。javascriptでは、配列の中に表示させたいイメージを入れ、onmouseoverで呼び出される関数の引数により、左方向右方向を判別し、方向に合わせて配列内のイメージ順序を入れ替えスクロールさせることにより、ぐるぐる回っているように見せています。それと同じものを3つつくり重ねて表示、z-indexで重なり順を関数の引数により変更させ出力します。あとは透明度をフェイドさせる関数で、あわせて入れ替わる様に、opacityを変更させています。

スクリプト名称	scrollimages2/最大数表示陳列棚
梱包内容	scrollimages.html
	scrollimages2	manual.txt (設置サポート)
		images
		include.js
		include.css
操作確認済ブラウザ
最終更新日	2007/06/15