ページの角にマウスを乗せると、ページがめくれるよ

公開日:  2015/08/04        0    0    0    1    hatenauser    

ページがめくれるアルバム作ってみました

レスポンシブにする方法がわからないので、スマホではうまく表示できませんでした
スマホ用に小さいものも作りました

ページの角にマウスを乗せると、ページがめくれるよ

アイコン

ページがめくれる

1 ファイル 1.11 MB
download

ファイルをダウンロードして、解凍します
サーバーにFTPでturn.jsファイルをアップロードします
ルートにjsフォルダを作成してその中に入れました

ヘッダーに追加

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/turn.js"></script>


フッターのbodyの直前に追加

<script>
  $('#magazine').turn();
</script>

これでもいいのですが、いろんなサイズを作成する場合はCSSで設定できないので

<script type="text/javascript">
	$("#magazine").turn({
		width: 600,
		height: 300,
		autoCenter: true
	});
</script>



HTML

<div id="magazine">
        <div style="background-image:url(pages/01.jpg);"></div>
	<div style="background-image:url(pages/02.jpg);"></div>
	<div style="background-image:url(pages/03.jpg);"></div>
	<div style="background-image:url(pages/04.jpg);"></div>
	<div style="background-image:url(pages/05.jpg);"></div>
	<div style="background-image:url(pages/06.jpg);"></div>
</div>


CSS

#magazine{
 width:600px;
 height:300px;
 }
 #magazine .turn-page{
 width:300px;
 height:300px;
 background-color:#ccc;
 }

もし、同一サイトでバージョンの違うｊQueryを複数使いたい場合は
<!--jQuery1呼び出し-->
<script type='text/javascript' src='./js/jquery_jcarousel/jquery-1.4.3.pack.js'></script>
<!--jQuery2呼び出し-->
<script type='text/javascript' src='js/jquery-1.7.1.min.js'></script>
 
<!--jQuery2を使いたい-->
<script type='text/javascript'>
var $171= jQuery.noConflict(true);
$171(document).ready(function(){
    $171('#hoge').jcarousel();
});
</script>
 
<!--jQuery1を使いたい-->
<script type='text/javascript'>
jQuery(document).ready(function() {
    jQuery('#abc').jcarousel();
});
</script>

このようにすると良いようです⇒同一サイトでバージョンの違うｊQueryを複数呼び出した場合に回避する方法

 

通常は右開きになるようになっています

この開き方を左右変えたい場合は、optionのdirectionを変更すれば良いです
$(“#flipbook”).turn({direction: “rtl”});

rtl はleft to rightです
デフォルト値はltrです



▼ コメント表示

PAGE TOP ↑