[jQuery FlipBookライブラリ] 画像を切り替えてアニメーションさせる

説明

jQuery FlipBookライブラリで画像を切り替えてアニメーションさせるには、あらかじめアニメーションさせる領域をdivタグで用意します。次にこのdivタグを$()で指定し、flipbook()メソッドを呼び出します。flipbook()のimagesオプションにアニメーションさせる画像のURLを配列形式で指定します。FlipBookはjQuery UIが必要なので、先にスタイルシートとライブラリを読み込ませておく必要があります。

サンプルプログラム

【HTML】
<html>
<head>
<title>Sample</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.flipbook-1.0.0.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-ui.flipbook-1.0.0.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1jQuery UI FlipBookサンプル</h1>
<div id="graph"><div>
</body>
</html>


【sample.js】
$(function() {
$('#graph').flipbook({
images: [
'images/1.png',
'images/2.png',
'images/3.png',
'images/4.png',
'images/5.png',
'images/6.png'
]
});
});
サンプルを実行
[戻る]