推薦一個HTML 5下的翻書效果插件turn js

frankyhui

要想在ipad等上做翻書的效果？以前看起來比較麻煩，現在就簡單多瞭，強烈推薦一個叫turn.js的效果，網站在http://www.turnjs.com
，使用起來很簡單，另外有一篇不錯的教程，是jquery+turn.js+php的，用來獲得在Instagram上的圖片，地址在：
http://tutorialzine.com/2012/03/instagram-magazine-php-jquery/

下面簡單小結下turn.js的用法，
<div id=magazine class=centerStart


</div

   <script src=http://code.jquery.com/jquery-1.7.1.min.js</script

<script src=assets/js/turn.js</script

這裡，隻需要要顯示的層的ID命名為magzine即可，然後用PHP讀數據庫，生成相關的頁面圖片如下
<div id=magazine class=centerStart

<div id=page1 class=page
<div class=img1

<span class=pageNum right1 // 32</span

</div
</div
..........................

</div


相關的CSS：
#magazine{
width:800px;
height:400px;
}
#magazine .turn-page{
width:400px;
height:400px;
background-color:#ccc;
}

  然後jquery中調用：
$(function(){

var mag = $('#magazine');

//調用插件的turn方法
mag.turn();

mag.bind('turned', function(e, page, pageObj) {

if(page == 1 && $(this).data('done')){
//如果是首頁，可以進行一些樣式的設計
mag.addClass('centerStart').removeClass('centerEnd');
}

//如果是封底，進行一些樣式的設計
else if (page == 32 && $(this).data('done')){
mag.addClass('centerEnd').removeClass('centerStart');
}
else {
mag.removeClass('centerStart centerEnd');
}

});

setTimeout(function(){

mag.fadeTo(500,1);
},1000);

//控制當使用鍵盤的前後鍵，也可以進行控制
$(window).bind('keydown', function(e){

// listen for arrow keys

if (e.keyCode == 37){
mag.turn('previous');
}
else if (e.keyCode==39){
mag.turn('next');
}

});

});

Tung8887

自己知道了  

tissss

飯可以亂吃，話也可以亂說，但帖子不可以亂髮哦