溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“如何使用JQuery的turn.js庫來實現翻書效果”，在日常操作中，相信很多人在如何使用JQuery的turn.js庫來實現翻書效果問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何使用JQuery的turn.js庫來實現翻書效果”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
實現效果如下
官方示例代碼：
html:
<div id = “ flipbook” > <div class = “ hard” > Turn.js </ div> <div class = “ hard” > </ div> <div> 第1頁 </ div> <div> 第2頁 < / div> <div> 第3頁 </ div> <div> 第4頁 </ div> <div class = “ hard” > </ div> <div class = “ hard” > </ div> </ div>
js:
第一步：記得要先引入JQ文件（1.3或更高版本才可以哦~~）
第二步：引入turn.js文件，可以到官網下載
第三步：接下來就可以用咱們的主角turn.js啦~~代碼如下↓↓↓
<script type = “ text / javascript” >
$（“ #flipbook”）.turn（{ 寬度：400， 高度：300， autoCenter：是 }）;
</ script>注：class為hard的可理解為一本書的（首末）封皮
特征
?適用于iPad和iPhone。
?簡單，美觀且功能強大的API。
?允許通過Ajax請求動態加載頁面。
?純HTML5 / CSS3內容。
?兩個過渡效果。
?可在帶有turn.html4.js的IE 8等舊瀏覽器中使用
要求
jQuery 1.3或更高版本。
瀏覽器支持
Safari 5鍍鉻16Firefox 10IE 10、9、8
設備
?所有iOS（iPad，iPhone，iPod）
?安卓（Chrome for Android）
改進措施
Turn.js 4在其核心上進行了一系列重要的性能改進。
?現在，在瀏覽器平臺上效果更加流暢。
?無論頁面大小如何，新的DOM組成都保證了相同的性能。
補體
turn.html4.js-turn.js的HTML4版本。
zoom.js-turn.js的新縮放功能，請參閱示例。
剪刀.js-為turn.js分為兩部分。
hash.js-使用pushState和URI散列控制導航歷史記錄。
API文檔
turn.js API方便地構建為jQuery的UI插件，它提供對一組功能的訪問，并允許您定義用戶交互。
完整的文檔可在此處獲得，也可以PDF格式獲得。
Options
acceleration 加速
autoCenter 自動居中
direction 方向
display 顯示
duration 持續時間
gradients 漸變
height 高度
elevation
page 頁
pages 頁數
turnCorners
when 執行函數
width 寬度
zoom 放大縮小
Properties
animating 動畫
direction 方向
display 顯示
disabled 禁用
page 頁
pages 頁數
size 大小
options
view 視圖
zoom 放大縮小
Methods 方法
addPage
center
destroy
direction
display
disable
hasPage
next
is
page
pages
peel
previous
range
removePage
resize
size
stop
version
zoom
Events 事件
end
first
last
missing
start
turning
turned
zooming
CSS Classes class類
.even
.fixed
.hard
.odd
.own-size
.page
.p[0-9]+
.shadow
.sheet
demo && 代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#flipbook div {
text-align: center;
line-height: 500px;
}
.backward,
.forward{
width: 40px;
height: 40px;
}
</style>
</head>
<body>
<!-- 官方示例代碼 -->
<!-- <div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"> </div>
<div> 第1頁 </div>
<div> 第2頁 </div>
<div> 第3頁 </div>
<div> 第4頁 </div>
<div class="hard"> </div>
<div class="hard"> </div>
</div> -->
<div id="flipbook">
<div style="background: pink;" class="hard"> </div>
<div style="background: olivedrab;" class="hard"> </div>
<div style="background: palegoldenrod;"> Page 1 </div>
<div style="background: paleturquoise;"> Page 2 </div>
<div style="background: plum;"> Page 3 </div>
<div style="background: mediumaquamarine;"> Page 4 </div>
<div style="background: greenyellow;"> Page 5 </div>
<div style="background: darkkhaki;"> Page 6 </div>
<div style="background: aqua;" class="hard"> </div>
<div style="background: teal;" class="hard"> </div>
</div>
<!-- 前一頁 -->
<img src="img/backward.png" class="backward" onclick="backwardPage()">
<!-- 后一頁 -->
<img src="img/forward.png" class="forward" onclick="forwarPage()">
</body>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/turn.min.js"></script>
<script>
$("#flipbook").turn({
width: 600,
height: 500,
// acceleration: true, // 是否加速，對于觸摸屏的設備，這個值必須為true
// autoCenter: true, // 是否居中 默認值false
// direction: "ltr", // 翻書方向，值為rtl / ltr（3種寫法），②HTML: <div id="flipbook" dir="rtl"></div> ③ CSS:#flipbook { direction:rtl; }
display: 'double', // 顯示單頁or雙頁,默認值是double (如果single, class為hard的div首末各一個就可以)
});
function backwardPage() {
$("#flipbook").turn("previous");
}
function forwarPage() {
$("#flipbook").turn("next");
}
</script>
</html>demo如下：
按鈕圖片：
到此，關于“如何使用JQuery的turn.js庫來實現翻書效果”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
