站長資訊網
最全最豐富的資訊網站

jQuery插件分享:Turn.js實現一個移動端電子書翻頁效果

怎么實現一個炫酷的翻書效果?下面本篇文章給大家分享一個jQuery插件–Turn.js,介紹一下怎么用Turn.js 實現移動端電子書翻頁項目,希望對大家有所幫助!

先來看一下效果:

jQuery插件分享:Turn.js實現一個移動端電子書翻頁效果

前端(vue)入門到精通課程,老師在線輔導:聯系老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調試工具:點擊使用

關于Turn.js

它是一個輕量級的 (15kb) jQuery/html5 插件用來創建類似書本和雜志翻頁效果,支持觸摸屏設備。Turn.js 支持硬件加速來讓翻頁效果更加平滑。【推薦學習:jQuery視頻教程、web前端視頻】

特征:

  • 適用于 iPad 和 iPhone。
  • 簡單、美觀且功能強大的 API。
  • 允許通過 Ajax 請求動態加載頁面。
  • 純 HTML5/CSS3 內容。
  • 兩種過渡效果。
  • 適用于舊瀏覽器,例如帶有 turn.html4.js 的 IE 8

turn.js的基本使用

1 引入turn.js

Turn.js依賴于jQuery,首先script標簽引入jQuery,和turn.js,jQuery 要求 1.3 或更高版本。

turn.js 可前往官網下載

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/turn.js"></script>
登錄后復制

2 創建html和css

創建一個容器元素和一些代表頁碼的子元素,為其設置合適的寬高,隨便輸入一點內容

<div id="flipbook">     <div class="page"></div>     <div class="page"></div>     <div class="page"></div>     <div class="page"></div> </div>
登錄后復制

3 基本用法

$('#flipbook').turn({     acceleration: true, // 是否啟動硬件加速 如果為觸摸設備必須為true     pages: 11, // 頁碼總數     elevation: 50, // 轉換期間頁面的高度     width: 300, // 寬度 單位 px     height: 800, // 高度 單位 px     gradients: true, // 是否顯示翻頁陰影效果     display: 'single', //設置單頁還是雙頁     when: { 	// 翻頁前觸發 	turning: function (e, page, view) { 	                     	}, 	// 翻頁后觸發 	turned: function (e, page) { 				         }     } });
登錄后復制

這樣就可以實現基本的翻頁效果了jQuery插件分享:Turn.js實現一個移動端電子書翻頁效果

3.1 turn常用配置項

jQuery插件分享:Turn.js實現一個移動端電子書翻頁效果

3.2 when 常用監聽事件

jQuery插件分享:Turn.js實現一個移動端電子書翻頁效果

3.3 turn 常用方法

jQuery插件分享:Turn.js實現一個移動端電子書翻頁效果

項目實現

項目有30p,每一p都對應一張圖片,一頁一頁搭建實在太慢了,用js創建

jQuery插件分享:Turn.js實現一個移動端電子書翻頁效果

封裝一個turn.js基本配置的函數,根據api實現自己的翻頁效果

jQuery插件分享:Turn.js實現一個移動端電子書翻頁效果

一進來調用創建函數,構建頁面,判斷當前瀏覽器環境是否支持 csstransforms 特性,支持 調用 turn.js 調用完畢后 執行 turn.js 基本配置函數

jQuery插件分享:Turn.js實現一個移動端電子書翻頁效果

拓展

項目中用到兩個js插件 簡單介紹一下

Modernizr.js

傳統瀏覽器目前不會被完全取代,令你難以將最新的 CSS3 或 HTML5 功能嵌入你的網站。 Modernizr 正是為解決這一難題應運而生,作為一個開源的 JavaScript 庫,Modernizr 檢測瀏覽器對 CSS3 或 HTML5 功能支持情況。

yeponpe.js

yepnope.js是一個能夠根據輸入條件來選擇性異步加載資源文件的js腳本,可以在頁面上僅加載用戶需要的js/css。

贊(0)
分享到: 更多 (0)
網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
国产精品素人搭讪在线播放| 亚洲精品蜜桃久久久久久| 国产精品久久久香蕉| 久久久影院亚洲精品| 中文字幕日韩专区精品系列| 色妞www精品一级视频| 国产在线国偷精品产拍| 亚洲国产精品久久久久秋霞小 | 久9这里精品免费视频| 正在播放国产精品每日更新| 亚洲国产精品无码久久九九| 一区二区三区日韩精品| 国产精品久久久久久久伊一| 久久精品国产亚洲av品善| 无码国内精品久久综合88| 亚洲精品日韩中文字幕久久久| 久久亚洲精品AB无码播放| 九九热在线视频观看这里只有精品| 久久人搡人人玩人妻精品首页| 四虎影院国产精品| 亚洲日韩精品无码专区| 日韩网站在线观看| 日韩成人av在线| 亚洲日韩国产精品无码av| 日韩精品极品视频在线观看免费| 国产亚洲日韩在线三区| 午夜激情经典日韩| 日韩AV无码不卡网站| 日韩高清在线二区| 八区精品色欲人妻综合网| 日韩免费电影网址| 日韩毛片免费无码无毒视频观看| 亚洲AV无码AV日韩AV网站| 日韩成人国产精品视频| 日韩免费视频观看| 日韩AV无码精品一二三区| 日韩一品在线播放视频一品免费| 日韩毛片无码永久免费看| 国产精品久久久久999| 网曝门精品国产事件在线观看| 欧美成人aaa片一区国产精品|