zoukankan      html  css  js  c++  java
  • turn.js实现翻书效果

    JS插件网 http://www.ijquery.cn/?p=173

    描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备。
    Turn.js 支持硬件加速来让翻页效果更加平滑。
    可通过 API 来获取当前显示的页号,并提供选项来定制默认页号、加速器、阴影和延时。

    图片展示:

    1

    兼容浏览器:IE6+/Firefox/Google Chrome
    官方链接:http://www.turnjs.com/
    JS下载:http://www.ijquery.cn/js/turn.js
    预览: http://www.ijquery.cn/demo/turn
    打包下载:http://www.ijquery.cn/js/turn/turn.zip

    HTML代码:注意这个脚本不能写在head前,只能放在magazine之后!

    [html]

    <div id="magazine">
    <div style="background-image:url(images/01.jpg);"></div>
    <div style="background-image:url(images/02.jpg);"></div>
    <div style="background-image:url(images/03.jpg);"></div>
    <div style="background-image:url(images/04.jpg);"></div>
    <div style="background-image:url(images/05.jpg);"></div>
    <div style="background-image:url(images/06.jpg);"></div>
    </div>
    <script type="text/javascript">
    $(‘#magazine’).turn({ 612, height: 400, acceleration: true});
    </script>

    [/html]

    JS引用代码:

    [js]

    <script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="http://www.ijquery.cn/js/turn.min.js"></script>

    [/js]

    CSS代码:

    参数说明:

    612    宽度
    height: 400   高度
    page (type: number, default: 1)    返回当前第几页
    shadows (type: boolean, default: true)   跳到到指定页数
    duration (type: number, default: 600)    渐变
    acceleration (type: boolean, default: true)  硬件加速

    转载请注明:爱上JQuery » 第38款插件:turn.js实现翻书效果

  • 相关阅读:
    引用的难点:函数返回值是引用(引用当左值)
    引用的意义与本质
    引用做函数参数
    Uva
    Uva
    Uva
    暑假集训-8.06总结
    暑假集训-8.05总结
    CH1801( 括号画家)
    最大异或对
  • 原文地址:https://www.cnblogs.com/focai/p/4156970.html
Copyright © 2011-2022 走看看