jquery翻頁效果- turn.js

以前在flash要寫一個翻書的效果，要花好多力氣才可以完成，而現在想用jQuery來寫一樣的效果就簡單到不行，別人都把外掛寫好了，套一下就可以弄成翻頁效果了。

使用的是這個turn.js plugin

然後照plugin介紹網頁一樣，準備一樣結構的html，再去使用外掛就可以了。

<div id='magazine'>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
</div>


加一下CSS。

view plaincopy to clipboardprint?

1. #magazine{   
2.     width:800px;   
3.     height:400px;   
4. }   
5. #magazine .turn-page{   
6.     width:400px;   
7.     height:400px;   
8.     background-color:#ccc;   
9. }  

使用外掛

view plaincopy to clipboardprint?

1. $('selector').turn(property | method [, parameters]);  

可以設定的項目有：
width type: number, default: $('selector').width()
height type: number, default: $('selector').height()
page type: number, default: 1
gradients type: boolean, default: true
duration type: number, default: 600
acceleration type: boolean, default: true

方便的是只要在他的"頁面"內的html，都可以自動幫你變成翻頁效果，真的是超方便的啦.. jQeury萬歲!!

Demo