如何使用JQuery的turn.js库来实现翻书效果

实现效果如下

如何使用JQuery的turn.js库来实现翻书效果

官方示例代码:

html:

<div id = “ flipbook” >   <div class = “ hard” > Turn.js </ div>   <div class = “ hard” > </ div>   <div> 第1页 </ div>   <div> 第2页 < / div>   <div> 第3页 </ div>   <div> 第4页 </ div>   <div class = “ hard” > </ div>   <div class = “ hard” > </ div></ div>

js:

  • 名列前茅步:记得要先引入JQ文件(1.3或更高版本才可以哦~~)

  • 第二步:引入turn.js文件,可以到官网下载

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

 <script type = “ text / javascript” > $(“ #flipbook”).turn({ 宽度:400, 高度:300, autoCenter:是 }); </ script>

注: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

  • center

  • destroy

  • direction

  • display

  • disable

  • hasPage

  • next

  • is

  • page

  • pages

  • peel

  • previous

  • range

  • removePage

  • resize

  • size

  • s较好

  • 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 && 代码如下:

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <style>            #flipbook div {                text-align: center;                line-height: 500px;            }            .backward,            .forward{                width: 40px;                height: 40px;            }        </style>    </head>    <body>        <!-- 官方示例代码 -->        <!-- <div id="flipbook">            <div class="hard">  Turn.js  </div>            <div class="hard"> </div>            <div>  第1页 </div>            <div>  第2页 </div>            <div>  第3页 </div>            <div>  第4页 </div>            <div class="hard"> </div>            <div class="hard"> </div>        </div> -->        <div id="flipbook">          <div style="background: pink;" class="hard"> </div>          <div style="background: olivedrab;" class="hard"> </div>          <div style="background: palegoldenrod;"> Page 1 </div>          <div style="background: paleturquoise;"> Page 2 </div>          <div style="background: plum;"> Page 3 </div>          <div style="background: mediumaquamarine;"> Page 4 </div>          <div style="background: greenyellow;"> Page 5 </div>          <div style="background: darkkhaki;"> Page 6 </div>          <div style="background: aqua;" class="hard"> </div>          <div style="background: teal;" class="hard"> </div>        </div>        <!-- 前一页 -->        <img src="img/backward.png" class="backward" onclick="backwardPage()">        <!-- 后一页 -->        <img src="img/forward.png" class="forward" onclick="forwarPage()">    </body>    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>    <script type="text/javascript" src="js/turn.min.js"></script>    <script>        $("#flipbook").turn({          width: 600,          height: 500,          // acceleration: true, // 是否加速,对于触摸屏的设备,这个值必须为true          // autoCenter: true, // 是否居中 默认值false          // direction: "ltr", // 翻书方向,值为rtl / ltr(3种写法),②HTML: <div id="flipbook" dir="rtl"></div> ③ CSS:#flipbook { direction:rtl; }          display: 'double', // 显示单页or双页,默认值是double (如果single, class为hard的div首末各一个就可以)        });        function backwardPage() {            $("#flipbook").turn("previous");        }        function forwarPage() {            $("#flipbook").turn("next");        }    </script></html>

demo如下:

如何使用JQuery的turn.js库来实现翻书效果

按钮图片:

如何使用JQuery的turn.js库来实现翻书效果 如何使用JQuery的turn.js库来实现翻书效果

到此,关于“如何使用JQuery的turn.js库来实现翻书效果”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

文章标题:如何使用JQuery的turn.js库来实现翻书效果,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/23632

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
亿速云的头像亿速云
上一篇 2022年9月8日
下一篇 2022年9月8日

相关推荐

  • 猫鼠服务器是什么公司

    猫鼠(Cats and Mouse)服务器可能是您要询问的一种服务器类型,或者是一个特定服务器名称的误解,但在知识库中并无明确的记录表示猫鼠服务器代表着一个具体的公司。如果您是在询问一个公司或品牌名为“猫鼠”的服务器供应商,可能需要提供更多信息或者具体的上下文才能得出准确答案。如果您实际上指的是一个…

    2024年4月25日
    7900
  • 推理服务器作用是什么

    摘要 推理服务器的作用是1、执行模型推理任务、2、优化推理性能、3、降低延迟、4、提高吞吐量、5、支持多种模型格式、6、提供模型管理与扩展功能。 在这些核心功能中,优化推理性能尤为关键,因为它直接关系到模型部署后的效率和稳定性。推理服务器通过使用专门的算法和硬件加速技术,大幅提高处理速度,同时保持高…

    2024年4月25日
    9700
  • 服务器管理的好处是什么

    摘要 服务器管理的好处包括: 1.提高安全性、2.增强性能、3.确保数据完整性、4.优化资源利用,等重要方面。特别是提高安全性,这是服务器管理中的关键部分,为防止未授权访问、数据泄露和其他潜在威胁,定期对服务器进行维护和更新至关重要。此外,安装安全软件、监控系统漏洞、及时打补丁和执行严格的访问控制策…

    2024年4月25日
    8600
  • 云服务器存储资料是什么

    摘要 云服务器存储资料是1、通过网络访问的远程服务器上存储的数据,其依赖于2、云计算技术,使得数据存取更加灵活和高效。在这两点中,通过网络访问的远程服务器存储意味着用户无需对物理硬件进行管理或投入高额的初期成本,而是通过互联网连接到远程数据中心,实现数据存储和管理。这种模式不仅降低了企业或个人的技术…

    2024年4月25日
    8500
  • 下挂的服务器叫什么

    摘要:下挂的服务器通常被称作1、边缘服务器或2、即服务外设。其中,边缘服务器主要用于提高网络服务的访问速度和提升用户体验。通过布局在接近最终用户的地理位置上,这种服务器能够缓存内容,减少数据传输的延迟,加快载入速度,有效缓解主服务器的负荷。边缘服务器尤其适用于内容交付网络(CDN)和大数据分析等场景…

    2024年4月25日
    9900
注册PingCode 在线客服
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部