浅析怎么使用JQuery的turn.js库来实现翻书效果

程序猿 • 2025年11月27日 10:01:54 • 用户投稿

本篇文章给大家介绍jquery的turn.js库，聊聊使用turn.js库实现翻书效果，希望对大家有所帮助！

今天来和大家分享下JQ的turn.js，下面我先来简单介绍下我们今天的主角turn.js。【相关教程推荐：jQuery教程】

Turn.js是一个JavaScript库，它集合了HTML5的所有优点，可以使我们的内容看起来像一本书或杂志，有真实的翻阅的效果。

它使用HTML5和CSS3来执行效果，所以它可以在iOS设备（iPad，iPhone，iPod）和Android设备等触摸设备上很好地工作~
Turn.js具有比Flash内容拥有真实HTML内容的所有优势，除了感觉到本机内容（可选内容，没有第三方上下文菜单）之外，还可以添加广告代码，HTML5视频，工具提示，图像，地图，表单，跟踪每个页面并将它们与数百个精巧的库组合在一起用于网络。

***本文关键词：turn.js属性值，用法，demo代码（见附录，在文章最后哦~~）。

实现效果如下

官方示例代码：

html:

    Turn.js         第1页     第2页 
    第3页     第4页

js:

第一步：记得要先引入JQ文件（1.3或更高版本才可以哦~~）

第二步：引入turn.js文件，可以到官网下载（官方地址：http://www.turnjs.com/）

第三步：接下来就可以用咱们的主角turn.js啦~~代码如下↓↓↓

  $（“ #flipbook”）.turn（{ 宽度：400， 高度：300， autoCenter：是 }）;

注：class为hard的可理解为一本书的（首末）封皮

特征

✓适用于iPad和iPhone。
✓简单，美观且功能强大的API。
✓允许通过Ajax请求动态加载页面。
✓纯HTML5 / CSS3内容。
✓两个过渡效果。
✓可在带有turn.html4.js的IE 8等旧浏览器中使用

要求

jQuery 1.3或更高版本。
浏览器支持
Safari 5镀铬16Firefox 10IE 10、9、8
设备
✓所有iOS（iPad，iPhone，iPod）
✓安卓（Chrome for Android）

改进措施

Turn.js 4在其核心上进行了一系列重要的性能改进。
✓现在，在浏览器平台上效果更加流畅。
✓无论页面大小如何，新的DOM组成都保证了相同的性能。

补体

turn.html4.js-turn.js的HTML4版本。
zoom.js-turn.js的新缩放功能，请参阅示例。
剪刀.js-为turn.js分为两部分。
hash.js-使用pushState和URI散列控制导航历史记录。

API文档

turn.js API方便地构建为jQuery的UI插件，它提供对一组功能的访问，并允许您定义用户交互。
完整的文档可在此处获得，也可以PDF格式获得。

Options

acceleration 加速

autoCenter 自动居中

direction 方向

display 显示

duration 持续时间

gradients 渐变

height 高度

elevation

page 页

pages 页数

turnCorners

when 执行函数

width 宽度

zoom 放大缩小

Properties

animating 动画

direction 方向

display 显示

disabled 禁用

page 页

pages 页数

size 大小

options

view 视图

zoom 放大缩小

Methods 方法

addPage

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

221 查看详情

center

destroy

direction

display

disable

hasPage

page

pages

peel

range

removePage

resize

size

stop

version

zoom

Events 事件

end

first

last

missing

start

turning

turned

zooming

CSS Classes class类

.even

.fixed

.hard

.odd

.own-size

.page

.p[0-9]+

.shadow

.sheet

附录demo 代码

demo && 代码如下：

                                        #flipbook div {                text-align: center;                line-height: 500px;            }            .backward,            .forward{                width: 40px;                height: 40px;            }                                <!--               Turn.js  
             
              第1页 
              第2页 
              第3页 
              第4页 
             
             
        
 -->                   
           
           Page 1 
           Page 2 
           Page 3 
           Page 4 
           Page 5 
           Page 6 
           
           
        
                                                        $("#flipbook").turn({          width: 600,          height: 500,          // acceleration: true, // 是否加速，对于触摸屏的设备，这个值必须为true          // autoCenter: true, // 是否居中 默认值false          // direction: "ltr", // 翻书方向，值为rtl / ltr（3种写法），②HTML: 
 ③ CSS:#flipbook { direction:rtl; }          display: 'double', // 显示单页or双页,默认值是double (如果single, class为hard的div首末各一个就可以)        });        function backwardPage() {            $("#flipbook").turn("previous");        }        function forwarPage() {            $("#flipbook").turn("next");        }

demo如下：

按钮图片：

【推荐学习：jQuery视频教程、web前端视频】

以上就是浅析怎么使用JQuery的turn.js库来实现翻书效果的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/835050.html

jquery turn.js

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

413.8K 文章

0 评论

2 粉丝

这个人很懒，什么都没有留下～

iPhone 12 Pro如何快速切换输入法

上一篇 2025年11月27日 10:01:52

如何用Linux日志监控网络流量

下一篇 2025年11月27日 10:01:54

用户投稿

WordPress开发：解决AJAX提交HTML内容中的反斜杠问题

在wordpress开发中，通过ajax提交包含html标签（尤其是“标签）的内容时，可能会在php后端收到带有反斜杠的字符串，导致html渲染异常。本文将深入分析这一问题的原因，并提供使用`wp_unslash()`函数在php端正确处理并移除这些反斜杠的解决方案，确保html内容（如…

程序猿
2026年9月12日
1000
用户投稿

UC浏览器H5视频无法播放怎么办 UC浏览器H5视频播放异常修复方法

清理UC浏览器缓存可解决H5视频加载问题，进入设置清除缓存数据后重启浏览器；2. 修改浏览器标识为手机版或iPhone版能绕过UA识别错误；3. 检查网络稳定性及视频链接有效性，避免HTTPS协议兼容问题，开发者应使用原生JavaScript操作video元素。在UC浏览器里遇到H5视频无法播放或…

程序猿
2026年9月12日
2000
用户投稿

thinkphp ajax请求接收不到数据怎么回事

答案：ThinkPHP中AJAX接收不到数据主因是请求方式与后端处理不匹配。1. 前端以JSON格式发送需用contentType: ‘application/json’，后端须通过file_get_contents(‘php://input’)解析；…

程序猿
2026年9月10日
3000
用户投稿

解决 Bootstrap 4.4 Navbar 折叠图标不显示问题：完整指南

本教程旨在解决 Bootstrap 4.4 导航栏在移动端折叠时，汉堡包图标不显示但功能正常的常见问题。核心原因通常是 Bootstrap CSS 或 JavaScript 依赖（如 jQuery, Popper.js）的 CDN 引入不完整或不正确。文章将提供一个完整的、可运行的 HTML 模板，…

程序猿
2026年9月5日
1000
jQuery选取image类型input元素

jquery的image选择器用于选取input元素中type属性值为image的元素。 1、创建新的HTML文档 2、创建表单并上传图片 3、预览效果见下图 4、引入 jQuery 库文件 5、使用jQuery的image选择器选取input中类型为image的元素，并设置其图片的宽度属…

程序猿
2026年9月2日 • 用户投稿
7000
jquery怎样排除第一个元素

在jquery中，可以利用not()方法和“:first”选择器来排除第一个元素，not()方法用于返回不符合一定条件的元素，“:first”选择器用于选取第一个元素，语法为“元素对象.not(“:first”)”。本教程操作环境：windows10系统、jquery3.2…

程序猿
2026年9月1日 • 用户投稿
0000
用户投稿

避免 jQuery AJAX POST 请求重复提交的策略与实践

本文探讨了在使用 jQuery AJAX 进行 POST 请求时，如何有效避免因事件监听器、快速点击或意外行为导致的重复提交问题。我们将介绍一种基于状态标志的解决方案，通过控制请求的执行时机，确保数据提交的准确性和一致性，并提供相应的代码示例和最佳实践建议，以优化用户体验和系统稳定性。问题描述：A…

程序猿
2026年8月28日
2000
用户投稿

Laravel 中创建排名表单并实现数据排序

本文旨在指导 Laravel 初学者构建一个简单的排名系统，允许用户对多个项目进行排序，并将排序结果存储在数据库中。我们将介绍如何设计数据库结构，以及如何使用 Eloquent ORM 实现数据的读取和排序。通过本文，你将掌握在 Laravel 应用中创建和管理排名数据的基本方法。数据库结构设计 …

程序猿
2026年8月28日
2000
如何解决PHP中复杂的HTML/XML解析与操作问题，arthurkushman/query-path助你轻松驾驭！

可以通过一下地址学习composer：学习地址告别繁琐：PHP 处理 HTML/XML 的痛与思在日常的 php 开发中，我们经常需要与各种 html 或 xml 文档打交道。无论是从第三方网页抓取信息，还是处理复杂的 xml 配置，亦或是动态生成和修改 html 片段，这些任务都不可避免。然而…

程序猿
用户投稿 2026年8月26日
1000
用户投稿

探究CSS引入第三方框架的作用及价值

CSS引入第三方框架的作用和意义，需要具体代码示例随着前端技术的迅猛发展，越来越多的前端工程师开始采用第三方框架来简化开发流程并提高工作效率。在CSS的世界里，也有许多优秀的第三方框架可供选择，如Bootstrap、Foundation等。本文将重点讨论CSS引入第三方框架的作用和意义，并通过具体…

程序猿
2025年12月24日
3000
用户投稿

如何巧妙运用jQuery和CSS3的动画功能创造出吸引人的网页效果

如何巧妙运用jQuery和CSS3的动画功能创造出吸引人的网页效果随着互联网技术的不断进步和发展，网页设计作为传递信息和吸引用户注意力的重要手段，无疑扮演着重要的角色。为了提供更好的用户体验，网页设计师们不断寻求创新与突破。而利用jQuery和CSS3的动画功能，成为了设计师们制造吸引人网页效果的…

程序猿
2025年12月24日
0000
用户投稿

创造更多可能性：为什么我们仍然需要CSS3动画，尽管已有jQuery？

创造更多可能性：为什么我们仍然需要CSS3动画，尽管已有jQuery？引言：在前端开发中，动画是不可或缺的一部分。它能够为网页增添生动和吸引力，同时也能提高用户体验。随着技术的发展，现在有多种动画实现方式，其中CSS3动画和jQuery是最常用的两种。虽然jQuery已经广泛应用于页面动画的开发，…

程序猿
2025年12月24日
3000
用户投稿

应该使用CSS3动画，而不只依赖jQuery：为什么选择更符合未来趋势

应该使用CSS3动画，而不只依赖jQuery：为什么选择更符合未来趋势在过去的几年中，web开发人员经常使用jQuery来实现各种动画效果。jQuery是一个功能强大且易于使用的JavaScript库，它简化了DOM操作和事件处理。然而，随着CSS3的出现，现在我们有了一种更加强大和灵活的方式来实…

程序猿
2025年12月24日
0000
用户投稿

更新你的网站：为什么要考虑使用CSS3动画而非仅依赖jQuery？

更新你的网站：为什么要考虑使用CSS3动画而非仅依赖jQuery？在现代网页设计中，动画效果已经成为吸引用户注意力和提升用户体验的重要组成部分。而在过去，使用jQuery是实现网页动画的主要方法之一。然而，随着CSS3动画的出现，越来越多的开发者开始选择使用CSS3动画来替代或补充jQuery动画…

程序猿
2025年12月24日
0000
用户投稿

不必选择：如何巧妙结合CSS3动画和jQuery效果打造高效果的网页

不必选择：如何巧妙结合CSS3动画和jQuery效果打造高效果的网页在当今互联网高度发达的时代，网页设计已经成为了让用户感到愉悦并且记忆深刻的关键要素之一。为了实现这一目标，许多前端开发人员开始善用CSS3动画和jQuery效果来提升网页的视觉效果和用户体验。本文将介绍如何巧妙结合CSS3动画和j…

程序猿
2025年12月24日
0000
用户投稿

CSS3动画为什么要与jQuery结合使用？探索它们的优势组合

CSS3动画为什么要与jQuery结合使用？探索它们的优势组合在现代网页设计中，动画效果是提升用户体验的重要组成部分。而CSS3的动画特性以及jQuery这个功能强大的JavaScript库，都能够提供丰富的动画效果。那么为什么要将它们结合使用呢？本文将探索CSS3动画与jQuery结合的优势，并…

程序猿
2025年12月24日
5000
用户投稿

既然有了jQuery，为什么CSS3还要有动画功能？了解两者的优缺点

既然有了jQuery，为什么CSS3还要有动画功能？了解两者的优缺点随着互联网的发展和用户需求的不断增加，网页动画在网站设计中扮演着越来越重要的角色。为了实现各种各样的动画效果，开发者可以选择使用jQuery或者CSS3来完成。那么，既然有了强大的jQuery，CSS3为什么还要具备动画功能呢？本…

程序猿
2025年12月24日
4000
用户投稿

CSS3动画与jQuery混搭：结合两者的优点，创造出前所未有的网页效果

CSS3动画与jQuery混搭：结合两者的优点，创造出前所未有的网页效果随着互联网的发展，网页设计的要求越来越高，我们希望能给用户呈现更多吸引人的效果。而CSS3动画和jQuery是两种常用的网页动效制作工具，它们各自有着独特的特点和优势。本文将介绍如何将CSS3动画与jQuery相结合，来创造出…

程序猿
2025年12月24日
3000
用户投稿

jQuery与CSS3动画功能有何不同？优劣对比

jQuery与CSS3动画功能有何不同？优劣对比引言：如今，网页设计已经越来越注重用户体验。而动画效果作为增强用户体验的重要手段之一，在网页设计中扮演着重要角色。在实现动画效果的过程中，开发者面临着选择使用jQuery还是CSS3动画的问题。本文将对两者进行对比分析，探讨其优劣之处，并为读者提供…

程序猿
2025年12月24日
0000
用户投稿

CSS3动画与jQuery的比较：选择适合您项目需求的技术

CSS3动画与jQuery的比较：选择适合您项目需求的技术引言：在前端开发中，动画效果是提升用户体验的重要组成部分。在过去，开发人员主要使用jQuery来实现页面上的动画效果。然而，随着CSS3的发展，它提供了强大的动画功能，使得使用纯CSS来实现动画效果成为可能。本文将对CSS3动画和jQue…

程序猿
2025年12月24日
0000

发表回复

登录后才能评论

浅析怎么使用JQuery的turn.js库来实现翻书效果

附录demo 代码

关于作者

相关推荐

发表回复