jQuery The Sexy Curlsでページめくり

ここではThe Sexy Curlsプラグインの紹介をしています。

sexy-curls

ダウンロードはこちら
http://elliottkember.com/sexy_curls.html

headで読み込み

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="turn.js"></script>
<link rel="stylesheet" href="turn.css">

使用するファイル
jquery.min.js
jquery-ui.min.js
turn.js
turn.css
必要な画像
後は削除しても大丈夫です。

script

$(document).ready(function(){
    $('#target').fold();
});

html

<img id="target" src="yellow-heart.jpg" />

めくれたときに表示する画像を指定してください。

turn.js

var defaults = {
    directory: '.',         // The directory we're in
    side: 'left',           // change me to "right" if you want rightness
    turnImage: 'fold.png',  // The triangle-shaped fold image
    maxHeight: 400,         // The maximum height. Duh.
    startingWidth: 80,      // The height and width 
    startingHeight: 80,     // with which to start (these should probably be camelCase, d'oh.)
    autoCurl: false         // If this is set to true, the fold will curl/uncurl on mouseover/mouseout.
};

デフォルトではこのようになっていますので左上がめくれる設定になっています。

右上をめくれるようにする

var defaults = {
    directory: '.',            // The directory we're in
    side: 'right',             // change me to "right" if you want rightness
    turnImage: 'fold-sw.png',  // The triangle-shaped fold image
    maxHeight: 400,            // The maximum height. Duh.
    startingWidth: 80,         // The height and width 
    startingHeight: 80,        // with which to start (these should probably be camelCase, d'oh.)
    autoCurl: false            // If this is set to true, the fold will curl/uncurl on mouseover/mouseout.
};

めくる最初の位置とめくれる位置はmaxHeight、startingWidth、startingHeightのパラメータで決定してください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください