![iScrolljs 模拟android相册]( "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>
