2012年4月23日 星期一

jquery翻頁效果- turn.js

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

使用的是這個turn.js plugin

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

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


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

使用外掛
  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
反應:

5 意見:

江戶川大雄 提到...

舜子哥,我想請問一下…
如果我想把這個外掛嵌在Blogger的發文上,
應該怎麼做?

抱歉,我的網頁語法幾乎是零…orz

Jason Jiang 提到...

要先把那隻js放到server
然後把那隻js引入
之後再照我得寫法就可以使用了
你可以先找找網頁的東西研究一下
因為短短的留言我也沒辦法解釋清楚..

匿名 提到...

如果我沒看錯
這是要收費的

Jason Jiang 提到...

我之前看還不用..
大概後來改的吧
不過我有抓到之前不用錢時的版本

amenda 提到...

您好,我最近在製作翻頁效果時,發現turn.min.js 在chrome無法正確運行,爬了貼子說要現在發行的turn.js~ 所以想跪求之前免費的版本試一下.

Related Posts Plugin for WordPress, Blogger...