guojy
/
dd_xcx


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
							<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <meta name="msapplication-tap-highlight" content="no"/>
    <link rel="stylesheet" href="assets/style.css">
    <title>Hammer.js</title>
    <style>

        .container {
            max-width: 900px;
            margin: 0 auto;
        }

        .panes.wrapper {
            max-height: 400px;
            max-width: 800px;
            background: #666;
            margin: 40px auto;
        }

        .panes {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        .pane {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
            font: bold 60px/250px 'Open Sans', Helvetica, Arial, sans-serif;
            color: #fff;
        }

        .panes.animate > .pane {
            transition: all .3s;
            -webkit-transition: all .3s;
        }

    </style>

</head>
<body>

    <div class="panes wrapper">
        <div class="pane bg1">
            <div class="panes">
                <div class="pane" style="background: rgba(0,0,0,0);">1.1</div>
                <div class="pane" style="background: rgba(0,0,0,.2);">1.2</div>
                <div class="pane" style="background: rgba(0,0,0,.4);">1.3</div>
                <div class="pane" style="background: rgba(0,0,0,.6);">1.4</div>
                <div class="pane" style="background: rgba(0,0,0,.8);">1.5</div>
            </div>
        </div>
        <div class="pane bg2">
            <div class="panes">
                <div class="pane" style="background: rgba(0,0,0,0);">2.1</div>
                <div class="pane" style="background: rgba(0,0,0,.2);">2.2</div>
                <div class="pane" style="background: rgba(0,0,0,.4);">2.3</div>
                <div class="pane" style="background: rgba(0,0,0,.6);">2.4</div>
                <div class="pane" style="background: rgba(0,0,0,.8);">2.5</div>
            </div>
        </div>
        <div class="pane bg3">
            <div class="panes">
                <div class="pane" style="background: rgba(0,0,0,0);">3.1</div>
                <div class="pane" style="background: rgba(0,0,0,.2);">3.2</div>
                <div class="pane" style="background: rgba(0,0,0,.4);">3.3</div>
                <div class="pane" style="background: rgba(0,0,0,.6);">3.4</div>
                <div class="pane" style="background: rgba(0,0,0,.8);">3.5</div>
            </div>
        </div>
        <div class="pane bg4">
            <div class="panes">
                <div class="pane" style="background: rgba(0,0,0,0);">4.1</div>
                <div class="pane" style="background: rgba(0,0,0,.2);">4.2</div>
                <div class="pane" style="background: rgba(0,0,0,.4);">4.3</div>
                <div class="pane" style="background: rgba(0,0,0,.6);">4.4</div>
                <div class="pane" style="background: rgba(0,0,0,.8);">4.5</div>
            </div>
        </div>
        <div class="pane bg5">
            <div class="panes">
                <div class="pane" style="background: rgba(0,0,0,0);">5.1</div>
                <div class="pane" style="background: rgba(0,0,0,.2);">5.2</div>
                <div class="pane" style="background: rgba(0,0,0,.4);">5.3</div>
                <div class="pane" style="background: rgba(0,0,0,.6);">5.4</div>
                <div class="pane" style="background: rgba(0,0,0,.8);">5.5</div>
            </div>
        </div>
    </div>

    <div class="container">
        <h1>Nested Pan recognizers</h1>

        <p>Nested recognizers are possible with some threshold and with use of <code>requireFailure()</code>.</p>
    </div>

    <script src="../../hammer.js"></script>
    <script>

        var reqAnimationFrame = (function() {
            return window[Hammer.prefixed(window, "requestAnimationFrame")] || function(callback) {
                setTimeout(callback, 1000 / 60);
            }
        })();

        function dirProp(direction, hProp, vProp) {
            return (direction & Hammer.DIRECTION_HORIZONTAL) ? hProp : vProp
        }


        /**
         * Carousel
         * @param container
         * @param direction
         * @constructor
         */
        function HammerCarousel(container, direction) {
            this.container = container;
            this.direction = direction;

            this.panes = Array.prototype.slice.call(this.container.children, 0);
            this.containerSize = this.container[dirProp(direction, 'offsetWidth', 'offsetHeight')];

            this.currentIndex = 0;

            this.hammer = new Hammer.Manager(this.container);
            this.hammer.add(new Hammer.Pan({ direction: this.direction, threshold: 10 }));
            this.hammer.on("panstart panmove panend pancancel", Hammer.bindFn(this.onPan, this));

            this.show(this.currentIndex);
        }


        HammerCarousel.prototype = {
            /**
             * show a pane
             * @param {Number} showIndex
             * @param {Number} [percent] percentage visible
             * @param {Boolean} [animate]
             */
            show: function(showIndex, percent, animate){
                showIndex = Math.max(0, Math.min(showIndex, this.panes.length - 1));
                percent = percent || 0;

                var className = this.container.className;
                if(animate) {
                    if(className.indexOf('animate') === -1) {
                        this.container.className += ' animate';
                    }
                } else {
                    if(className.indexOf('animate') !== -1) {
                        this.container.className = className.replace('animate', '').trim();
                    }
                }

                var paneIndex, pos, translate;
                for (paneIndex = 0; paneIndex < this.panes.length; paneIndex++) {
                    pos = (this.containerSize / 100) * (((paneIndex - showIndex) * 100) + percent);
                    if(this.direction & Hammer.DIRECTION_HORIZONTAL) {
                        translate = 'translate3d(' + pos + 'px, 0, 0)';
                    } else {
                        translate = 'translate3d(0, ' + pos + 'px, 0)'
                    }
                     this.panes[paneIndex].style.transform = translate;
                     this.panes[paneIndex].style.mozTransform = translate;
                     this.panes[paneIndex].style.webkitTransform = translate;
                }

                this.currentIndex = showIndex;
            },

            /**
             * handle pan
             * @param {Object} ev
             */
            onPan : function (ev) {
                var delta = dirProp(this.direction, ev.deltaX, ev.deltaY);
                var percent = (100 / this.containerSize) * delta;
                var animate = false;

                if (ev.type == 'panend' || ev.type == 'pancancel') {
                    if (Math.abs(percent) > 20 && ev.type == 'panend') {
                        this.currentIndex += (percent < 0) ? 1 : -1;
                    }
                    percent = 0;
                    animate = true;
                }

                this.show(this.currentIndex, percent, animate);
            }
        };

        // the horizontal pane scroller
        var outer = new HammerCarousel(document.querySelector(".panes.wrapper"), Hammer.DIRECTION_HORIZONTAL);

        // each pane should contain a vertical pane scroller
        Hammer.each(document.querySelectorAll(".pane .panes"), function(container) {
            // setup the inner scroller
            var inner = new HammerCarousel(container, Hammer.DIRECTION_VERTICAL);

            // only recognize the inner pan when the outer is failing.
            // they both have a threshold of some px
            outer.hammer.get('pan').requireFailure(inner.hammer.get('pan'));
        });

    </script>

</body>
</html>