iScrolljs 模拟android相册

var showBigImage = new iScroll('showBigImage', {
            snap: 'div',
            snapThreshold: 480,
            momentum: false,
            zoom : true,
            zoomMin : 1.0,
            zoomMax : 1.0,
            hScrollbar : false,
            vScrollbar : false,
            doubleTapZoom: 1,
            checkDOMChanges : true,
            onScrollEnd: function () {
                var $lazyImgs = $('#showBigImage .scroller span img'),
                    len = $lazyImgs.length,
                    i = 0,
                    step = this.currPageX,
                    that = this,
                    startX,
                    startY;

                for (; i < len; i++) {
                    if (parseInt($lazyImgs.eq(i).offset().left) === 0) {
                        $lazyImgs.eq(i).attr('src', $lazyImgs.eq(i).attr('lazysrc'));
                    };
                };

                $(".bigImgNavBar ul li").removeClass("active");
                $(".bigImgNavBar ul li").eq(step).addClass("active");
                
                $('#showBigImage .scroller span img').each(function (k,v) {
                    var $this = $(v);

                    $this.bind('touchstart', function (event) {
                        startX = event.originalEvent.touches[0].pageX;
                        startY = event.originalEvent.touches[0].pageY;
                    });
                    $this.bind('touchmove', function (event) {
                        var moveX = event.originalEvent.touches[0].pageX,
                            moveY = event.originalEvent.touches[0].pageY;

                        if (Math.abs(startX - moveX) > 480) {
                            if (parseInt($this.width()) !== 500) {
                                $this.css({'width': '500px', 'height': '500px', 'z-index': 1, 'left': '0px', 'top': '0px'});
                            }
                        };
                    });
                    $this.bind('touchend', function (event) {
                        event.preventDefault();
                    });
                });
            },
            onZoomEnd: function (event) {
                var $this = $(event.target),
                    targetImgW = parseInt($this.width()),
                    targetImgH = parseInt($this.height());

                if (event.target.tagName.toLowerCase() !== 'img') return;

                console.log($this.offset().left,$this.get(0))
                if (targetImgW !== 500 ) {
                    $this.css({'width': targetImgW/2 + 'px', 'height': targetImgH/2 + 'px', 'z-index': 1, 'left': '0px', 'top': '0px'});
                } else {
                    $this.css({'width': targetImgW*2 + 'px', 'height': targetImgH*2 + 'px', 'z-index': 2, 'top': '-70px', 'left': -targetImgW/2 + 'px'});    
                };    
            }
        });

 

<div id="showBigImage" style="overflow: hidden; z-index: 99999; background-color: white; position: fixed; top: 0px; left: 0px; bottom: 0px; width: 100%;">
    <div class="scroller" style="-webkit-transition: -webkit-transform 0ms; transition: -webkit-transform 0ms; -webkit-transform-origin: 0px 0px; -webkit-transform: translate(0px, 0px) scale(1) translateZ(0px); width: 7680px; height: 100%;"><span style="display:table-cell;vertical-align:middle;width:100%;height:100%;overflow:hidden;"><div><span><em style="display:block;width:640px;height:640px;position:relative;"><img src="http://pic.secoo.com/product/500/500/94/53/10249453_1.jpg" width="100%" style="width:500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;width:640px;height:640px;position:relative;"><img lazysrc="http://pic.secoo.com/product/500/500/94/53/10249453_2.jpg" width="100%" style="width:500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;width:640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/468befa3d8e04ebaaeded763471e44e8.jpg" width="100%" style="width:500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;width:640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/50060046684c44a08e81b56e9a7af741.jpg" width="100%" style="width:500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;width:640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/1bbb3bc472834e1fa68b19ea7becc0c9.jpg" width="100%" style="width:500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;width:640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/fc1d3f61d1314a0faf8aea168cb49f62.jpg" width="100%" style="width:500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;width:640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/11a31d2967e64aa7bd8387839da221d0.jpg" width="100%" style="width:500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;width:640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/4679351842e84b3097934688d323656b.jpg" width="100%" style="width:500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;width:640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/19b7569ab5a04cc0b2b4c589161d5c97.jpg" width="100%" style="width:500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;width:640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/112d32a189034fe18d1b65914bf94491.jpg" width="100%" style="width:500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;width:640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/a08467b6d5914197b7fe7dbf5e46286c.jpg" width="100%" style="width:500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;width:640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/7efa6dbd51d64424a2b9e8631022936a.jpg" width="100%" style="width:500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div></span></div>
  <div class="bigImgNavBar">
    <ul><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
  </div>
</div>