/**
*
* @authors lwd ([email protected])
* @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
});
}
}
};
