登录  /  注册
首页 > web前端 > js教程 > 正文

jQuery插件分享:Turn.js实现一个移动端电子书翻页效果

青灯夜游
发布: 2022-12-01 20:35:48
转载
3430人浏览过

怎么实现一个炫酷的翻书效果?下面本篇文章给大家分享一个jquery插件--turn.js,介绍一下怎么用turn.js 实现移动端电子书翻页项目,希望对大家有所帮助!

先来看一下效果:

tutieshi_356x768_1s.gif

关于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 基本用法

$(&#39;#flipbook&#39;).turn({
    acceleration: true, // 是否启动硬件加速 如果为触摸设备必须为true
    pages: 11, // 页码总数
    elevation: 50, // 转换期间页面的高度
    width: 300, // 宽度 单位 px
    height: 800, // 高度 单位 px
    gradients: true, // 是否显示翻页阴影效果
    display: &#39;single&#39;, //设置单页还是双页
    when: {
	// 翻页前触发
	turning: function (e, page, view) {
	                    
	},
	// 翻页后触发
	turned: function (e, page) {
				
        }
    }
});
登录后复制

这样就可以实现基本的翻页效果了image.png

3.1 turn常用配置项

image.png

3.2 when 常用监听事件

image.png

3.3 turn 常用方法

image.png

项目实现

项目有30p,每一p都对应一张图片,一页一页搭建实在太慢了,用js创建

image.png

封装一个turn.js基本配置的函数,根据api实现自己的翻页效果

image.png

一进来调用创建函数,构建页面,判断当前浏览器环境是否支持 csstransforms 特性,支持 调用 turn.js 调用完毕后 执行 turn.js 基本配置函数

image.png

拓展

项目中用到两个js插件 简单介绍一下

Modernizr.js

传统浏览器目前不会被完全取代,令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站。 Modernizr 正是为解决这一难题应运而生,作为一个开源的 JavaScript 库,Modernizr 检测浏览器对 CSS3 或 HTML5 功能支持情况。

yeponpe.js

yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本,可以在页面上仅加载用户需要的js/css。

更多编程相关知识,请访问:编程教学!!

以上就是jQuery插件分享:Turn.js实现一个移动端电子书翻页效果的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:掘金社区网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号