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; 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); 7680px; height: 100%;"><span style="display:table-cell;vertical-align:middle;100%;height:100%;overflow:hidden;"><div><span><em style="display:block;640px;height:640px;position:relative;"><img src="http://pic.secoo.com/product/500/500/94/53/10249453_1.jpg" width="100%" style="500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;640px;height:640px;position:relative;"><img lazysrc="http://pic.secoo.com/product/500/500/94/53/10249453_2.jpg" width="100%" style="500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/468befa3d8e04ebaaeded763471e44e8.jpg" width="100%" style="500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/50060046684c44a08e81b56e9a7af741.jpg" width="100%" style="500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/1bbb3bc472834e1fa68b19ea7becc0c9.jpg" width="100%" style="500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/fc1d3f61d1314a0faf8aea168cb49f62.jpg" width="100%" style="500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/11a31d2967e64aa7bd8387839da221d0.jpg" width="100%" style="500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/4679351842e84b3097934688d323656b.jpg" width="100%" style="500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/19b7569ab5a04cc0b2b4c589161d5c97.jpg" width="100%" style="500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/112d32a189034fe18d1b65914bf94491.jpg" width="100%" style="500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/a08467b6d5914197b7fe7dbf5e46286c.jpg" width="100%" style="500px;height:500px;padding:50px;border:solid 20px transparent;position:absolute;top:0;left:0;"></em></span></div><div><span><em style="display:block;640px;height:640px;position:relative;"><img lazysrc="http://pic7.secoo.com/vendor_product_mall/14/4/7efa6dbd51d64424a2b9e8631022936a.jpg" width="100%" style="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>