prototype.jsでつくるイメージカバ-フローのjsライブラリ「Showcase.js」

js0810121.jpg

dev.victorstanciu.roより、prototype.jsでつくるイメージカバ-フローのjsライブラリ「Showcase.js」の紹介です。

端の「+」、「-」をクリックするれば横、縦、斜めに画像がスライドします。

横にスライドのデモページ

縦にスライドのデモページ

斜めにスライドのデモページ

設置方法は、prototype.js、effects.js、showcase.jsをダウンロードして、HTMLのhead要素に設置するだけです。


<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="showcase.js"></script>

見た目の操作はCSSで行います。下記サンプルです。

CSS


#showcase {
	position: relative;
	width: 700px;
	height: 170px;
	}
#showcase li {
	width: 170px;
	height: 170px;
	float: left;	
	list-style-type: none;	
}	

#showcase li img {
	width: 100%;
	height: 100%;
}

showcase.jsのダウンロードはコチラよりできます。