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のパラメータで決定してください。

コメントを残す

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

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.