• 技术文章 >web前端 >js教程

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

    青灯夜游青灯夜游2022-09-07 10:58:36转载254
    本篇文章给大家介绍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:

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

     <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散列控制导航历史记录。

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

    Options

    Properties

    Methods 方法

    Events 事件

    CSS Classes class类

    附录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视频教程web前端视频

    以上就是浅析怎么使用JQuery的turn.js库来实现翻书效果的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:博客园,如有侵犯,请联系admin@php.cn删除
    专题推荐:turn.js jquery
    上一篇:jQuery发布 3.6.1 新版本,看看有哪些改进! 下一篇:探索 Node.js 源码,详解cjs 模块的加载过程
    VIP课程(WEB全栈开发)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• jquery find方法怎么获取第一个子元素• jquery怎么清除行内样式属性• 用jquery前要导入么• jquery怎么求兄弟节点的内容值• jquery怎么实现几秒后跳转页面• jquery中子元素选择器和后代元素选择器有什么区别?
    1/1

    PHP中文网