skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

コンテンツをスライド表示させるJavaScript「Slide box」

｜ ｜ ｜ ｜ ｜ ｜ ｜

デザインの都合上、省きたいが、でもこのコンテンツ入れたい。。。
そんなサイト制作者の葛藤を解消してくれるのが、Slide boxです。
最初は隠しておきながら、ボタンを押すとエフェクトつきで表示されます。

使用方法
Slide boxからslidebox.js、slidebox.cssを、jQueryからjquery.jsをダウンロードします。
<link rel="stylesheet" href="slidebox.css" type="text/css" media="screen">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="slidebox.js"></script>
<script>
$(document).ready(function(){
$("#ID名").slideBox();
});
</script>

上記を記述後、指定したIDでスライド表示させたいコンテンツを書きます。
<div id="ID名">コンテンツ</div>
※オプション
$(document).ready(function(){
$("#ID名").slideBox({
width: "100%", //ボックス幅
height: "200px",　//ボックス高さ
position: "bottom" //表示位置
});
});
コンテンツをスライド表示させるJavaScript「Slide box」サンプル

記事作成：2009年01月21日

前の記事：ページをめくるようなエフェクトJavaScript「The Sexy Curls jQuery Plugin」
次の記事：アップ画像のどこを見ているかを表示するJavaScript「ImgNavigator」