turn.js试用

738 阅读1分钟
  • 最近项目想要一个类似于书翻页的效果,baidu了好多终于找到一个插件turn.js,点进github发现竟然是大佬十年前的作品!!!
  • turn.js 可自行下载,记得引用jq和turn.js
<div id="magazine">
    <div style="background-image:url(pages/01.jpg);"></div>
    <div style="background-image:url(pages/02.jpg);"></div>
    <div style="background-image:url(pages/03.jpg);"></div>
    <div style="background-image:url(pages/04.jpg);"></div>
    <div style="background-image:url(pages/05.jpg);"></div>
    <div style="background-image:url(pages/06.jpg);"></div>
</div>

<script type="text/javascript">
    $(window).ready(function() {
        $('#magazine').turn({
            display: 'double',  // 获取当前显示的是单页还是双页
            acceleration: true,  // 设置硬件加速模式,对于触摸设备,此值必须为true
            gradients: !$.isTouch,  // 翻页过程中显示渐变和阴影
            elevation:50,  // 转换期间页面的高度
            when: {
                    turned: function(e, page) {
                            // 翻页后做一些什么事
                    },
                    turning: function(e, page) {
                            // 翻页时做一些什么事
                    },
            }
        });
    });

    //  键盘翻页
    $(window).bind('keydown', function(e){
        if (e.keyCode==37)
           $('#magazine').turn('previous');  // 上一页
        else if (e.keyCode==39)
           $('#magazine').turn('next');   // 下一页
    });
</script>
  • 附上一张完成效果

8FCDBAD6-FB95-4b0f-B99F-D9267F39E7E5.png

  • 不足之处望大佬指出