达州做网站

咨询热线：

028-86922220

×

01

关于我们

02

服务项目

高端网站建设

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03

小程序开发

小程序开发

04

案例展示

网站建设案例

小程序案例

电商平台案例

系统平台案例

05

建站动态

06

联系我们

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

大橙子网站建设，新征程启航

为企业提供网站建设、域名注册、服务器等服务

怎么用jQuery插件Turn.js实现移动端电子书翻页效果

本篇内容主要讲解“怎么用jQuery插件Turn.js实现移动端电子书翻页效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用jQuery插件Turn.js实现移动端电子书翻页效果”吧!

成都创新互联自2013年起，是专业互联网技术服务公司，拥有项目网站设计制作、成都做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元天涯做网站,已为上家服务,为天涯各地企业和个人服务,联系电话:13518219792

先来看一下效果：

怎么用jQuery插件Turn.js实现移动端电子书翻页效果

关于Turn.js

它是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果，支持触摸屏设备。Turn.js 支持硬件加速来让翻页效果更加平滑。

特征：

适用于 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 可前往官网下载

2 创建html和css

创建一个容器元素和一些代表页码的子元素，为其设置合适的宽高，随便输入一点内容

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。

到此，相信大家对“怎么用jQuery插件Turn.js实现移动端电子书翻页效果”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

网站栏目：怎么用jQuery插件Turn.js实现移动端电子书翻页效果
本文地址：http://dzwzjz.com/article/jeejgg.html

其他资讯

服务热线：028-86922220