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

程序猿 • 2025年11月27日 10:01:54 • web前端 • 阅读 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 粉丝

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

探索 Node.js 源码，详解cjs 模块的加载过程

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

jQuery发布 3.6.1 新版本，看看有哪些改进！

下一篇 2025年11月27日 10:02:05

好文分享

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

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

程序猿
2025年12月24日
0000
好文分享

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

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

程序猿
2025年12月24日
0000
好文分享

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

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

程序猿
2025年12月24日
0000
好文分享

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

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

程序猿
2025年12月24日
1000
好文分享

更新你的网站：为什么要考虑使用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日
0000
好文分享

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

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

程序猿
2025年12月24日
0000
好文分享

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

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

程序猿
2025年12月24日
0000
好文分享

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

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

程序猿
2025年12月24日
0000
好文分享

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

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

程序猿
2025年12月24日
0000
好文分享

带你使用CSS+jQuery实现一个文字转语音机器人

本篇文章手把手带大家使用css+jquery实现一个文字转语音机器人，希望对大家有所帮助！素材机器人眼睛【推荐学习：css视频教程、jQuery视频教程、web前端视频】立即学习“前端免费学习笔记（深入）”；页面布局机器人样式参考了下图，通过css拼造型的方式进行实现。部分还原了设计图 …

程序猿
2025年12月24日
0000
好文分享

jq怎么写css样式

方法如下：一般要在页面初始化的时候就要加载样式，所以使用ready()方法，语法格式为“$(document).ready(function)”。当DOM已经加载，并且页面（包括图像）已经完全呈现时，会发生ready事件。本教程操作环境：windows7系统、CSS3&&HTML5…

程序猿
2025年12月24日
0000
jq如何动态添加动态css样式

jq动态添加动态css样式的方法：首先准备jquery库文件，并声明一个class样式；然后准备一个事件加载初始化的方法，并直接用匿名函数；接着addClass方法给div元素添加class；最后通过css方法进行级联的更改。本教程操作环境：windows7系统、css3&&jqu…

程序猿
2025年12月24日 • 好文分享
0000
浅谈jQuery+CSS实现前端网页加载进度条的三种方式

【推荐教程：CSS视频教程】前端网页加载进度条的实现有三种方式，看自己需求：一、顶部进度条在html代码中间插入jq代码执行动画。页面加载到哪部分，进度条就会相应的向前走多少立即学习“前端免费学习笔记（深入）”；当全部加载完成后将loading进度条模块隐藏顶部进度条 .loadi…

程序猿
2025年12月24日 • 好文分享
0000
如何区分css中的:not()选择器和jQuery中的.not()方法？（代码示例）

本篇文章给大家带来的内容是介绍如何区分css中的:not()选择器和jquery中的.not()方法？（代码示例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。因为老是将这两个的not方法弄混，所以写一下备忘。 css中:not()选择器用法 :not 伪类选择器可以筛选不符合…

程序猿
好文分享 2025年12月24日
0000
关于jQuery浏览器CSS3特写兼容的介绍

这篇文章主要介绍了jquery浏览器css3特写兼容的方法,实例分析了jquery兼容浏览器的使用技巧,需要的朋友可以参考下本文实例讲述了jQuery浏览器CSS3特写兼容的方法。分享给大家供大家参考。具体分析如下： CSS3充分吸收多年了web发展的需求，吸收了很多新颖的特性。例如border-…

程序猿
好文分享 2025年12月24日
0000
CSS3和jQuery实现跟随鼠标方位的Hover特效

这篇文章主要介绍了基于css3和jquery实现跟随鼠标方位的hover特效的相关资料,需要的朋友可以参考下今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果。当鼠标滑进的时候，遮罩层会从上次鼠标滑出的方向滑入，当鼠标滑出的时候，遮罩层会跟随鼠标，从鼠标滑…

程序猿
好文分享 2025年12月24日
0000
如何基于CSS3和jQuery实现APPLE TV海报视差的效果

这篇文章主要介绍了基于jquery和css3实现apple tv海报视差效果,需要的朋友可以参考下用CSS和jQuery来实现它，尽量看起来和原效果一样。本教程里，我将使用CSS,HTML和jQuery来创建一个近似Apple TV视差效果，如果你正在阅读，我假设你对上述三种技术都有基本的了解。…

程序猿
2025年12月24日 • 好文分享
1000
jquery动态添加和遍历option的方法

这次给大家带来jquery动态添加和遍历option的方法，jquery动态添加遍历option的注意事项有哪些，下面就是实战案例，一起来看一下。实例如下所示：全部 os2 os2-anthonos os2-apps os2-centralpoint kf5-experimental //动态添…

程序猿
好文分享 2025年12月24日
0000

发表回复

登录后才能评论

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

附录demo 代码

关于作者

相关推荐

发表回复