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

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號
亚洲精品无码人妻无码| 久久久久亚洲精品无码蜜桃| 揄拍自拍日韩精品| 国产人妻777人伦精品hd| 亚洲国产精品久久久久秋霞影院| 久久精品午夜福利| 精品综合久久久久久97超人| 国产美女精品视频| 日韩美女18网站久久精品| 成人网站免费大全日韩国产| 精品久久伦理中文字幕| 久久精品无码中文字幕| 任我爽橹在线精品视频| 国产精品久久久久9999| 777国产偷窥盗摄精品品在线| 熟妇无码乱子成人精品| 亚洲国产精品特色大片观看完整版 | 97久久精品亚洲中文字幕无码| 国产AV国片精品| 精品一卡2卡三卡4卡免费视频| 亚洲精品高清国产一线久久| 国产亚洲精品AA片在线观看不加载 | 国内精品伊人久久久久妇| 激情亚洲一区国产精品| 91精品国产麻豆国产自产在线| 亚洲精品中文字幕无乱码| 91精品福利视频| 亚洲欧洲精品视频在线观看| 亚洲乱人伦精品图片| 国产精品高清一区二区人妖| 国产精品嫩草影院一二三区入口| 精品卡一卡二卡乱码高清| 国产精品成人va| 亚洲精品国产国语| 亚洲国产成人综合精品| 国产乱码精品一区二区三区麻豆 | 国产成人无码精品久久久久免费| 一区二区国产精品| 精品国产一级在线观看| 自拍中文精品无码| 国产综合免费精品久久久|