html5+turn.js模拟合同电子书翻页代码

html5+turn.js模拟合同电子书翻页代码，以前发布过一些书本翻页效果基本都是图片形式的，这个是文字形式的哦。

分类：html5 难易：中级

查看演示下载资源下载积分： 20 积分

js代码

<script type="text/javascript" src="basic/extras/jquery.min.1.7.js"></script>
    <script type="text/javascript" src="basic/extras/modernizr.2.5.3.min.js"></script>
    <script type="text/javascript">
        function loadApp() {
            $('.flipbook').turn({
                width: 914,
                height: 643,
                elevation: 500,
                gradients: true,
                autoCenter: true

            });
        }
        yepnope({
            test: Modernizr.csstransforms,
            yep: ['basic/lib/turn.js'],
            nope: ['basic/lib/turn.html4.min.js'],
            both: ['basic/css/basic.css'],
            complete: loadApp
        });

        $(".prev-btn").on("click", function (event) {
            $(".flipbook").turn("previous");
        });
        //上一页按钮
        $(".next-btn").on("click", function (event) {
            $(".flipbook").turn("next");
        });

        $('.seal').on('click', function () {
            var str = '可以自定义公司名称'; //假设公司名称
            var letter = str.split('');
            var o = 7 - Math.floor(letter.length / 2);
            $(this).parent().siblings('.box').children('span').html();
            for (var i = 0; i < letter.length; i++) {
                $(this).parent().siblings('.box').children('span').eq(o + i).html(letter[i]);
            }
            $(this).hide().siblings('.qx-seal').show().parent().siblings('.box').show();
        })
        
        $('.qx-seal').on('click', function () {
            $(this).hide().siblings('.seal').show().parent().siblings('.box').hide();
        })

        $('.disabled').find('input').attr('disabled', 'disabled');
        $('.disabled').find('.seal').attr('disabled', 'disabled');
    </script>