资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

怎么用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实现移动端电子书翻页效果
URL分享：http://cdkjz.cn/article/jeejgg.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

业务热线：400-028-6601 / 大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
遂宁海缘科技自动门整合营销眉山网站建设成都工装公司香港云服务器租用网络推广公司公路打桩机成都圣月窗帘东电技服

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询400-028-6601

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图