基于jQuery多重图片无限循环动画效果。这是一款非常实用的jQuery多图片无限循环动画特效插件。效果图如下：

在线预览    源码下载

实现的代码。

html代码：

 <div id="paper-back">
        <nav>
            <div class="close"></div>
            <a href="#">Home</a>
            <a href="#">About Us</a>
            <a href="#">Our Work</a>
            <a href="#">Contact</a>
        </nav>
    </div>
    <div id="paper-window">
        <div id="paper-front">
            <div class="hamburger"><span></span></div>
            <div id="container">
                <section>
                    <p>点击左上角的按钮打开菜单</p>
                    <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. <br>不支持IE8及以下浏览器。</p>
                    <p>
                    <script src="/scripts/2bc/_gg_980_90.js" type="text/javascript"></script></p>
                </section>
                <section></section>
            </div>
        </div>
    </div>

js代码：

  var paperMenu = {
            $window: $('#paper-window'),
            $paperFront: $('#paper-front'),
            $hamburger: $('.hamburger'),
            offset: 1800,
            pageHeight: $('#paper-front').outerHeight(),
            open: function () {
                this.$window.addClass('tilt');
                this.$hamburger.off('click');
                $('#container, .hamburger').on('click', this.close.bind(this));
                this.hamburgerFix(true);
                // console.log('opening...');
            },
            close: function () {
                this.$window.removeClass('tilt');
                $('#container, .hamburger').off('click');
                this.$hamburger.on('click', this.open.bind(this));
                this.hamburgerFix(false);
                // console.log('closing...');
            },
            updateTransformOrigin: function () {
                scrollTop = this.$window.scrollTop();
                equation = (scrollTop + this.offset) / this.pageHeight * 100;
                this.$paperFront.css('transform-origin', 'center ' + equation + '%');
            },
            hamburgerFix: function (opening) {
                if (opening) {
                    $('.hamburger').css({
                        position: 'absolute',
                        top: this.$window.scrollTop() + 30 + 'px'
                    });
                } else {
                    setTimeout(function () {
                        $('.hamburger').css({
                            position: 'fixed',
                            top: '30px'
                        });
                    }, 300);
                }
            },
            bindEvents: function () {
                this.$hamburger.on('click', this.open.bind(this));
                $('.close').on('click', this.close.bind(this));
                this.$window.on('scroll', this.updateTransformOrigin.bind(this));
            },
            init: function () {
                this.bindEvents();
                this.updateTransformOrigin();
            }
        };
        paperMenu.init();

via：http://www.w2bc.com/article/jquery-left-lean-nav

在线预览    源码下载