showImagesFn.init({ "btnName" : "imgs_ul", "end" : function(index,wrapper){ wrapper.siblings(".img_percent").find("span").eq(0).html(index + 1); var width = wrapper.find("li").width(); wrapper.find("ul").css("margin-left" , - index * width).attr("data-index" , index); } }); /** * * @authors lwd (495986719@qq.com) * @date 2018-02-01 16:39:05 * @version v.1.0.1 * @params { "btnName" : "imgs_ul", //包含li->img标签的父元素，可以是id或者class "scaleSmall" : 1, //手机，手动缩放图片的最小缩小倍数,默认1 "scaleBig" : 4 //手机，手动缩放图片的最大放大倍数,默认4 } */var showImagesFn = { "init" : function(json){ this.btnName = json.btnName; this.scaleBig = json.scaleBig || 4;//最大放大倍数 this.scaleSmall = json.scaleSmall || 1;//最小缩小倍数 this.end = json.end || function(){}; this.winWidth = $(window).width(); this.winHeight = $(window).height(); this.imgWrapWidth = $(window).width() > 640 ? 640 : $(window).width(); this.index = 0; this.scaleArray = []; this.touchMethod = 0; this.showImagesContainer(); return this; }, "getUrls" : function(child){ var lis = $(child).parent().find("li"); var scope = this; lis.each(function(){ var img = $(this).find("img"); if (img.parent().hasClass("MIDIV")) { var url = img.parent().attr("data-src"); }else{ var url = $(this).find("img").attr("src"); } scope.urls.push(url); }); this.length = this.urls.length; }, "setHtml" : function(){ var section = $(' '); this.section = section; this.cover = $(' '); this.container = $(' '); var head = $(' '); this.nowIndex = $('1'); this.totalImgs = $(''); this.totalImgs.html(this.length); head.append(this.nowIndex); head.append("/"); head.append(this.totalImgs); this.container.append(head); this.body = $(' '); var ul = $(' '); ul.css({ "width" : this.winWidth * this.length }); this.ul = ul; var prop = this.imgWrapWidth / this.winHeight; var scope = this; scope.loadImg(0); this.body.append(ul); this.container.append(this.body); section.append(this.cover); section.append(this.container); this.shutDown = $('
'); this.shutDown.css({ "width": "30%", "height": "44px", "position": "absolute", "z-index": "1002", "left": "0", "top": "-100%" }); var span = $('
') span.css({ "display": "block", "width": "14px", "height": "14px", "border-left": "1px solid #fff", "border-top": "1px solid #fff", "transform": "rotate(-45deg)", "position": "absolute", "left": "14px", "top": "14px" }); this.shutDown.append(span); section.append(this.shutDown); $(document.body).append(section); var scope = this; this.ul.on("touchstart",function(e){ scope.slideTouchStart(e,scope); }); this.ul.on("touchmove",function(e){ scope.slideTouchMove(e,scope); }); this.ul.on("touchend",function(e){ scope.slideTouchEnd(e,scope); }); this.ul.on("mousedown",function(e){ scope.mouseDown(e,scope); }); this.ul.on("mousemove",function(e){ scope.mouseMove(e,scope); }); this.ul.on("mouseup",function(e){ var e = e || window.event; scope.mouseUp(e,scope); var upX = e.clientX; var upY = e.clientY; if (Math.abs(upX - scope.mouseX) < 1 && Math.abs(upY - scope.mouseY) < 1) { scope.hideContainer(); } }); }, "loadImg" : function(i){ var scope = this; var img = new Image(); img.src = scope.urls[i]; img.onerror = function(){ if (WST) { var bakSrc = WST.ROOT + "/Public/wap/images/loadFail.png"; }else{ var bakSrc = "/Public/wap/images/loadFail.png"; } scope.setLi(this,scope,bakSrc); if (i < scope.length - 1) { scope.loadImg(i + 1); } } img.onload = function(){ scope.setLi(this,scope); if (i < scope.length - 1) { scope.loadImg(i + 1); } } }, "setLi" : function(thisImg,scope,src){ var width = thisImg.naturalWidth; var height = thisImg.naturalHeight; var li = $('
'); li.css({ "width" : scope.winWidth, "height" : scope.winHeight, "position" : "relative", "display" : "-webkit-box", "vertical-align" : "middle", "-webkit-box-pack" : "center", "-webkit-box-align" : "center" // ,"-webkit-transform" : "scale(2)" }); var imgElement = $("
![]()
"); src = src || thisImg.src; imgElement.attr({
"src" : src}).css({ "max-width" : "100%", "max-height" : "100%", "display" : "block", "overflow": "hidden" }); li.append(imgElement); scope.ul.append(li); scope.scaleArray.push(1); }, "winResize" : function(){ var scope = this; $(window).resize(function(){ scope.winWidth = $(window).width(); scope.winHeight = $(window).height(); scope.imgWrapWidth = $(window).width() > 640 ? 640 : $(window).width(); scope.ul.css({ "width" : scope.winWidth * scope.length, "height" : scope.winHeight, "left" : -scope.winWidth * scope.index }); scope.ul.find("li").css({ "width" : scope.winWidth, "height" : scope.winHeight }); }); }, "showImagesContainer" : function(){ var scope = this; var btn = $("#" + this.btnName).length > 0 ? "#" + this.btnName : "." + this.btnName; var mouseMoveHappen = false; $(document).on("mousemove",function(){ mouseMoveHappen = true; }); $(document).on("mousedown",function(){ mouseMoveHappen = false; }); $(document).on("click",btn + " li",function(){ scope.btnBom = $(this).closest(btn); if (!mouseMoveHappen) { scope.urls = []; scope.getUrls(this); scope.index = $(this).index(); var scrollTop = $(window).scrollTop(); var left = ($(window).width() - $(document.body).width()) / 2; $(document.body).css({
"position":"fixed","top":"-" + scrollTop + "px","left" : left}); scope.setHtml(); scope.hideImagesContainer(); scope.ul.css({ "left" : -scope.winWidth * scope.index }); scope.nowIndex.html(scope.index + 1); scope.winResize(); } }); }, "hideImagesContainer" : function(){ var scope = this; this.shutDown.click(function(){ scope.hideContainer(); }); }, "hideContainer" : function(){ var top = -parseFloat($(document.body).offset().top); $(document.body).css({
"position":"initial"}); $(window).scrollTop(top); for (var i = 0; i < this.length; i++) { this.scaleArray[i] = 1; } this.section.remove(); this.end && this.end(this.index,this.btnBom); }, "slideTouchStart" : function(e,scope){ var touch = e.originalEvent.changedTouches[0]; scope.startX = touch.clientX; scope.startY = touch.clientY; scope.ulLeft = parseFloat(scope.ul.css("left")); scope.ulTop = parseFloat(scope.ul.css("top")); scope.touchMethod = 1; try { scope.dis = []; }catch (e) { alert('touchSatrtFunc：' + e.message); } }, "mouseDown" : function(e,scope){ var e = e || window.event; scope.mouseX = e.clientX; scope.mouseY = e.clientY; scope.ulLeft = parseFloat(scope.ul.css("left")); scope.ulTop = parseFloat(scope.ul.css("top")); scope.mouseStart = 1; }, "mouseMove" : function(e,scope){ var e = e || window.event; e.preventDefault(); if (scope.mouseStart === 1) { scope.mX = e.clientX; scope.mY = e.clientY; var dx = scope.mX - scope.mouseX; var dy = scope.mY - scope.mouseY; var left; //过度距离 var boundDis = 10; //超越距离 var switchDis = 30; left = scope.ulLeft + dx; scope.ul.css({ "left" : left }); } }, "slideTouchMove" : function(e,scope){ e.preventDefault(); var evt = e.originalEvent; var touch = evt.touches[0]; if (evt.touches.length === 1 && scope.touchMethod === 1) { scope.dX = touch.clientX; scope.dY = touch.clientY; var dx = scope.dX - scope.startX; var dy = scope.dY - scope.startY; var boundLeft = scope.winWidth * (scope.scaleArray[scope.index] - 1) / 2 - scope.winWidth * scope.index; var boundRight = -scope.winWidth * (scope.scaleArray[scope.index] - 1) / 2 - scope.winWidth * scope.index; var boundTop = scope.winHeight * (scope.scaleArray[scope.index] - 1) / 2; var left,top; //过度距离 var boundDis = 10; //超越距离 var switchDis = 30; if (scope.scaleArray[scope.index] > 1) { if (scope.ulTop + dy >= boundTop + boundDis ) { top = boundTop + boundDis; }else if(scope.ulTop + dy <= -boundTop - boundDis){ top = -boundTop - boundDis; }else{ top = scope.ulTop + dy; } if (scope.ulLeft + dx >= boundLeft + boundDis) { //放大时向右滑 var bdx = scope.ulLeft + dx - ((boundLeft + boundDis)); left = boundLeft + boundDis + bdx / 10; if (left > boundLeft + switchDis) { scope.scaleArray[scope.index] = 1; top = 0; if (scope.index > 0) { scope.ul.find("li").eq(scope.index - 1).css({ "z-index" : 1 }).siblings().css({ "webkitTransform" : 'scale(1)', "z-index" : 0 }); } } }else if(scope.ulLeft + dx <= boundRight - boundDis){ //放大时向左滑 var bdx = scope.ulLeft + dx - (boundRight - boundDis); left = boundRight - boundDis + bdx / 10; if (left < boundRight - switchDis) { scope.scaleArray[scope.index] = 1; top = 0; if (scope.index < scope.length - 1) { scope.ul.find("li").eq(scope.index + 1).css({ "z-index" : 1 }).siblings().css({ "webkitTransform" : 'scale(1)', "z-index" : 0 }); } } }else{ left = scope.ulLeft + dx; } scope.ul.css({ "top" : top }); scope.ul.css({ "left" : left }); }else{ left = scope.ulLeft + dx; scope.ul.css({ "left" : left }); } }else if(evt.touches.length === 2){ scope.touchMethod = 2; try { var x = Number(touch.clientX); //页面触点X坐标 var y = Number(touch.clientY); //页面触点Y坐标 if (evt.targetTouches.length == 2) { var touch1 = evt.targetTouches[1]; //获取第2个触点 var x1 = Number(touch1.clientX); //页面触点X坐标 var y1 = Number(touch1.clientY); //页面触点Y坐标 scope.dis.push(Math.sqrt(Math.pow(x - x1, 2) + Math.pow(y - y1, 2))); if (scope.dis.length > 1) { scope.scaleArray[scope.index] -= 0.05 * (scope.dis[scope.dis.length - 2] - scope.dis[scope.dis.length - 1]); if (scope.scaleArray[scope.index] < scope.scaleSmall) { scope.scaleArray[scope.index] = scope.scaleSmall; } if(scope.scaleArray[scope.index] > scope.scaleBig){ scope.scaleArray[scope.index] = scope.scaleBig; } scope.ul.find("li").eq(scope.index).css({ "webkitTransform" : 'scale(' + scope.scaleArray[scope.index] + ')', "z-index": 1 }).siblings().css({ "z-index" : 0 }); } } }catch (e) { alert('touchMoveFunc：' + e.message); } } }, "mouseUp" : function(e,scope){ var e = e || window.event; var evt = e.originalEvent; scope.endX = e.clientX; var dx = scope.endX - scope.mouseX; if (Math.abs(dx) / scope.imgWrapWidth < 0.1) { scope.ul.stop().animate({ "left" : -scope.winWidth * scope.index },200); }else{ if (dx > 0) { if (scope.index === 0) { scope.ul.stop().animate({ "left" : -scope.winWidth * scope.index },200,moveEnd); }else{ scope.ul.stop().animate({ "left" : -scope.winWidth * (scope.index - 1) },200,function(){ if (scope.index > 0) { scope.index --; scope.nowIndex.html(scope.index + 1); } moveEnd(); }); } }else{ if (scope.index === (scope.length - 1)) { scope.ul.stop().animate({ "left" : -scope.winWidth * scope.index },200,moveEnd); }else{ scope.ul.stop().animate({ "left" : -scope.winWidth * (scope.index + 1) },200,function(){ if (scope.index < scope.length - 1) { scope.index ++; scope.nowIndex.html(scope.index + 1); moveEnd(); } }); } } } scope.mouseStart = 0; function moveEnd(){ scope.ul.find("li").eq(scope.index).css({ "z-index" : 1 }).siblings().css({ "z-index" : 0 }); } }, "slideTouchEnd" : function(e,scope){ var evt = e.originalEvent; var touch = evt.changedTouches[0]; if (scope.scaleArray[scope.index] > 1) { try { e.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动 }catch (e) { alert('touchEndFunc：' + e.message); } }else{ scope.endX = touch.clientX; var dx = scope.endX - scope.startX; if (Math.abs(dx) / scope.imgWrapWidth < 0.05) { scope.ul.stop().animate({ "left" : -scope.winWidth * scope.index, "top" : 0 },200); }else{ if (dx > 0) { if (scope.index === 0) { scope.ul.stop().animate({ "left" : -scope.winWidth * scope.index },200,moveEnd); }else{ scope.ul.stop().animate({ "left" : -scope.winWidth * (scope.index - 1) },200,function(){ if (scope.index > 0) { scope.index --; scope.nowIndex.html(scope.index + 1); } moveEnd(); }); } }else{ if (scope.index === (scope.length - 1)) { scope.ul.stop().animate({ "left" : -scope.winWidth * scope.index },200,moveEnd); }else{ scope.ul.stop().animate({ "left" : -scope.winWidth * (scope.index + 1) },200,function(){ if (scope.index < scope.length - 1) { scope.index ++; scope.nowIndex.html(scope.index + 1); moveEnd(); } }); } } } } function moveEnd(){ for (var i = 0; i < scope.length; i++) { if (i !== scope.index) { scope.scaleArray[i] = 1; } scope.ul.find("li").eq(i).css({ "webkitTransform" : 'scale(' + scope.scaleArray[i] + ')' }); } scope.ul.find("li").eq(scope.index).css({ "z-index" : 1 }).siblings().css({ "z-index" : 0 }); } }};
{$appraiseData_best_list['appraisesImg_count']}张