SAY討論區

標題: 推薦一個HTML 5下的翻書效果插件turn js [打印本頁]

作者: frankyhui 時間: 2012-5-12 02:14:34 標題: 推薦一個HTML 5下的翻書效果插件turn js

要想在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 時間: 2012-5-14 03:12:40

自己知道了

作者: tissss 時間: 2012-5-14 03:12:40

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

歡迎光臨 SAY討論區 (http://forum.go2tutor.com/)