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

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

本篇文章给大家介绍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

关于作者

程序猿签约作者

414.1K 文章

0 评论

2 粉丝

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

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

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

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

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

用户投稿

修复Django电商项目中AJAX过滤产品列表图片不显示问题

在Django电商项目中，当使用AJAX动态加载过滤后的产品列表时，常遇到图片无法正常显示的问题。这通常是由于前端模板中图片加载方式（如data-setbg属性结合JavaScript库）与AJAX动态内容更新机制不兼容所致。解决方案是直接在AJAX返回的HTML中使用标准的标签来渲染图片，确保浏览…

程序猿
2026年5月10日
0000
用户投稿

使用 Ajax 和 FormData 实现文件上传及文本数据提交的完整教程

本文旨在解决在使用 Ajax 和 FormData 进行文件上传时，遇到的 $_POST 和 $_FILES 为空的问题。通过详细的代码示例和解释，我们将展示如何正确地构建 FormData 对象，并通过 Ajax 将文件和文本数据发送到服务器端，同时避免常见的错误配置，确保数据能够成功地被 PHP…

程序猿
2026年5月10日
0000
用户投稿

从 JavaScript 获取 URL 并在 PHP DataGrid 中使用

本文档旨在指导开发者如何从 JavaScript 函数中获取 URL，并将其动态应用于 PHP DataGrid。通过前端 JavaScript 动态生成 API 地址，并将其传递给后端的 PHP DataGrid，实现数据根据用户会话动态加载。动态配置 DataGrid 的 URL 在构建动态 …

程序猿
2026年5月10日
0000
用户投稿

如何安全有效地从外部网页获取HTML元素数据并应用于自身页面

本教程旨在解决如何在不同域名下，通过javascript获取并使用另一个网页的html元素数据。文章将深入探讨同源策略的限制，并提供两种主要解决方案：使用` 在现代Web开发中，有时我们需要从外部网站获取特定的HTML内容或属性值，并将其整合到我们自己的网页中。例如，从XYZ.COM/B.html页…

程序猿
2026年5月10日
0000
用户投稿

解决jQuery动态修改表单Action后提交失败的问题

本教程旨在解决使用jQuery动态修改表单action属性后提交失败的问题。通过将逻辑绑定到提交按钮的click事件而非表单的submit事件，并在修改action后手动触发表单提交，可以有效确保表单携带正确的动态action属性成功提交，避免页面重载而不执行预设行为。在web开发中，我们经常需要…

程序猿
2026年5月10日
0000
用户投稿

告别重复：使用Laravel Precognition统一前后端API验证

本文旨在解决在Laravel后端与前端API交互中，如何高效复用后端验证规则的挑战。传统方案常限于表单元素，难以覆盖所有API请求。通过引入Laravel Precognition，开发者能够实现后端验证逻辑在前端的无缝应用，避免规则重复编写，从而提升开发效率与代码一致性，确保所有API请求的数据完…

程序猿
2026年5月10日
2000
用户投稿

如何利用JavaScript进行数据抓取(Web Scraping)？

JavaScript可用于网页抓取，主要适用于动态内容。使用Puppeteer可控制无头浏览器执行JS并提取数据；对于静态页面，可用axios结合Cheerio解析HTML；需设置请求头、用户代理以应对反爬；抓取结果可保存为JSON或CSV，并通过node-cron定时运行任务。 JavaScrip…

程序猿
2026年5月10日
0000
用户投稿

Cypress测试：获取子元素数量与验证动态内容更新的最佳实践

本教程探讨了在cypress中正确获取dom元素子节点数量的方法，特别是在`cy.then()`回调中处理jquery对象。我们将详细介绍如何使用jquery的`.children()`方法或原生dom属性来获取子元素数量，并强调在测试动态内容增长时，应避免在单个测试中使用`if-else`逻辑，提…

程序猿
2026年5月10日
0000
用户投稿

使用jQuery AJAX发送数组/列表数据并解决415错误

本文详细阐述了如何通过jquery ajax向asp.net mvc控制器正确发送数组或列表类型的数据，并解决常见的“415 unsupported media type”错误。核心在于客户端需将数据序列化为json字符串并设置正确的`contenttype`，同时服务器端控制器方法需使用`[htt…

程序猿
2026年5月10日
0000
用户投稿

在 Heroku 应用中使用 Python 创建文件并提供下载链接

本文介绍了如何在 Heroku 平台上使用 Flask 框架，通过 Python 创建文件，并提供前端下载链接的实现方法。重点讲解了后端文件创建与读取，以及前端通过 JavaScript 使用 AJAX 请求获取文件内容并生成下载链接的关键步骤。通过本文，开发者可以学习到如何在 Heroku 应用中…

程序猿
2026年5月10日
0000
用户投稿

利用Fetch API与DOM操作实现Spring项目前端局部内容刷新

本文详细讲解在Spring项目中，如何通过前端JavaScript的Fetch API和DOM操作，实现对特定表单或字段集的局部内容刷新，尤其是在执行删除操作后，避免整页刷新，从而提升用户体验和应用性能。我们将通过为动态生成的元素添加唯一ID，并利用JavaScript精确移除或隐藏DOM元素，来达…

程序猿
2026年5月10日
0000
用户投稿

解决循环中重复ID与AJAX成功消息定位问题的教程

在Web开发中，当使用循环动态生成HTML元素时，为每个元素分配唯一的ID至关重要，尤其是在结合JavaScript和AJAX进行交互时。本文将深入探讨如何避免在循环中重复使用ID导致的AJAX成功消息错位问题，并提供正确的事件绑定和元素定位策略，确保每次操作都能准确更新对应的UI部分，提升用户体验…

程序猿
2026年5月10日
1000
用户投稿

优化HTML页面box-shadow显示：解决滚动内容区域阴影不完整问题

在使用bootstrap构建页面时，将`box-shadow`直接应用于`body`元素可能导致当页面内容超出浏览器视口高度时，阴影效果在滚动时显示不完整。本教程将深入分析这一问题，并提供一个通过调整css样式，将`box-shadow`应用到`main`内容区域的解决方案，以确保阴影效果能随着内容…

程序猿
2026年5月10日
0000
用户投稿

隐藏段落中超过9位数字的电话号码，并排除标签内的号码

本文介绍如何使用 jQuery 脚本隐藏 HTML 段落（标签）中超过 9 位的数字，同时排除包含在标签内的数字。我们将提供一个示例代码，演示如何实现这一功能，并解释代码的工作原理。解决方案以下代码片段展示了如何使用 jQuery 实现隐藏段落中超过 9 位数字的电话号码，并排除标签内的号…

程序猿
2026年5月10日
1000
用户投稿

从列表中移除 Undefined 值的实用指南

本文旨在提供一种简洁有效的方法，从包含潜在 `undefined` 值的列表中移除这些值，确保数据清洗和输出的准确性。通过使用 JavaScript 的 `filter` 方法，可以轻松地过滤掉 `undefined` 值，从而获得一个干净的数据列表。在 JavaScript 开发中，处理来自 D…

程序猿
2026年5月10日
0000
用户投稿

HTML表格数据动态过滤教程

本文详细介绍了如何使用javascript和jquery实现html表格的客户端动态过滤功能。通过识别并纠正常见的html结构错误，特别是`tbody`和`table`元素的id应用，文章提供了一个高效且易于理解的过滤脚本。教程涵盖了事件监听、输入值获取、行遍历与显示/隐藏逻辑，并强调了`slice…

程序猿
2026年5月10日
0000
用户投稿

JavaScript 实现图片上传预览功能：从本地文件到页面展示

@@##@@注意事项：安全性： Data URL 可能会比较长，如果直接存储到数据库中，可能会影响性能。建议将图片上传到服务器，存储图片的 URL。兼容性： FileReader 对象在现代浏览器中都支持，但在一些老版本浏览器中可能不支持。需要进行兼容性处理。错误处理：可以添加错误处理机制，例如…

程序猿
2026年5月10日
0000
用户投稿

如何在点击的Div中获取正确的ID

本文旨在解决动态生成的HTML元素中，点击事件发生时，如何准确获取与该元素关联的ID值的问题。通过事件委托和DOM遍历，我们将提供一种可靠的方法，确保在复杂的动态环境中，始终能获取到正确的ID，避免因选择器错误而导致的数据获取错误。在动态生成的HTML结构中，经常会遇到点击事件需要获取特定ID的情…

程序猿
2026年5月10日
0000
用户投稿

Materialize 折叠面板头部颜色动态修改：基于下拉选择的实现

本教程旨在解决 Materialize CSS 框架中，根据下拉菜单的选择动态改变折叠面板头部文本颜色的问题。文章将深入探讨在存在嵌套元素及 CSS 特异性影响下，如何精准定位并修改目标元素的样式，提供详细的 JavaScript、HTML 和 CSS 代码示例，确保开发者能够成功实现交互式 UI …

程序猿
2026年5月10日
0000
如何销毁或取消初始化 Magnific Popup 图片画廊

本文档介绍了如何销毁或取消初始化 Magnific Popup 插件创建的图片画廊。通过关闭当前弹窗、移除事件监听器等步骤，可以有效地释放资源并避免潜在的冲突。文章提供了详细的代码示例，演示了初始化和销毁 Magnific Popup 的方法，方便开发者在项目中灵活应用。 Magnific Popu…

程序猿
2026年5月10日 • 用户投稿
0000

发表回复

登录后才能评论

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

附录demo 代码

关于作者

相关推荐

发表回复