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

ページをめくるようなエフェクトJavaScript「The Sexy Curls jQuery Plugin」

｜ ｜ ｜ ｜ ｜ ｜ ｜

チラ見せしちゃうJavaScript「Page Peel」に引き続き、ページをめくるような表現をつけられるJavaScript「The Sexy Curls jQuery Plugin」です。
これにより、効果的に広告やコンテンツを見せることが可能です。

使用方法
The Sexy Curls jQuery Pluginから、turn.jsとturn.cssを、jQueryからjquery.jsならびにjquery-ui.jsをダウロードします。
<link rel="stylesheet" type="text/css" href="turn.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="turn.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$( '#target' ).fold({side: 'right'});
});
</script>

上記を記述すると後は以下で完成です。
<img id="target" src="隠す画像">
※オプション
var defaults = {
directory: 'turn', // めくる画像を置いたディレクトリ
side: 'left', // めくる画像を置く場所
turnImage: 'fold.png', // めくり画像
maxHeight: 400, // 最大の高さ
starting_width: 80, // 最初の幅
starting_height: 80 // 最初の高さ
};
ページをめくるようなエフェクトJavaScript「The Sexy Curls jQuery Plugin」

記事作成：2009年01月20日

前の記事：画像を切り替えるJavaScript「jQuery Slinky Slider」
次の記事：コンテンツをスライド表示させるJavaScript「Slide box」