// (function (window, document) {
|
var ImgView = function (targetDom, options) {
|
// 判断是用函数创建的还是用new创建的。这样我们就可以通过MaskShare("dom") 或 new MaskShare("dom")来使用这个插件了
|
if (!(this instanceof ImgView)) return new ImgView(targetDom, options);
|
// 参数
|
this.options = this.extend(
|
{
|
dataList: [],
|
currentSrc: "",
|
},
|
options
|
);
|
// 获取dom
|
this.targetDom = document.getElementById(targetDom);
|
var html =
|
"<div id='imgViewDiv' class='img-view-dialog'>" +
|
"<div id='imgViewContent' class='img-view-content' draggable>" +
|
"<img id='dialogImg' class='dialog-img' src=''></div>" +
|
"<div class='dialog-tool'><i id='closeDialog' class='close-dialog'></i>" +
|
"<i id='rotateDialog' class='rotate-dialog'></i><i id='prevDialog' class='previous-dialog'></i>" +
|
"<i id='nextDialog' class='next-dialog'></i></div></div>";
|
this.targetDom.innerHTML = html;
|
this.btnClose = document.getElementById("closeDialog");
|
this.btnRotate = document.getElementById("rotateDialog");
|
this.btnPrev = document.getElementById("prevDialog");
|
this.btnNext = document.getElementById("nextDialog");
|
this.imgViewDiv = document.getElementById("imgViewDiv");
|
this.imgViewContent = document.getElementById("imgViewContent");
|
this.dialogImg = document.getElementById("dialogImg");
|
this.num = 0;
|
this.winWidth = 0;
|
this.winHeight = 0;
|
(this.startX = 0), (this.startY = 0), (this.x = 0), (this.y = 0);
|
this.index = 1;
|
this.event();
|
};
|
ImgView.prototype = {
|
init: function () {
|
this.event();
|
},
|
extend: function (obj, obj2) {
|
for (var k in obj2) {
|
obj[k] = obj2[k];
|
}
|
return obj;
|
},
|
event: function () {
|
var _this = this;
|
_this.thisSrc = _this.options.currentSrc;
|
var dataList = _this.options.dataList;
|
var index = dataList.indexOf(_this.thisSrc);
|
_this.checkImg(_this.options.currentSrc, index);
|
// 关闭
|
_this.btnClose.addEventListener("click", function () {
|
_this.close(_this);
|
});
|
// 旋转
|
_this.btnRotate.addEventListener("click", function () {
|
_this.rotate(_this);
|
});
|
// 上一张
|
_this.btnPrev.addEventListener("click", function () {
|
_this.prev(_this);
|
});
|
// 下一张
|
_this.btnNext.addEventListener("click", function () {
|
_this.next(_this);
|
});
|
// 鼠标按下
|
_this.imgViewContent.addEventListener("mousedown", function (event) {
|
_this.mousedown(_this, event);
|
});
|
// 滚轮事件 chrome & ie
|
_this.imgViewContent.addEventListener("mousewheel", function (event) {
|
_this.mousewheel(_this, event);
|
});
|
// 滚轮事件 firefox
|
_this.imgViewContent.addEventListener("DOMMouseScroll", function (event) {
|
_this.mousewheel(_this, event);
|
});
|
},
|
// 滚轮事件
|
mousewheel: function (_this, event) {
|
event.preventDefault();
|
var delta =
|
(event.wheelDelta && (event.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
|
(event.detail != 0 && (event.detail > 0 ? -1 : 1));
|
if (delta > 0) {
|
// 向上滚
|
_this.index = _this.index + 0.1;
|
if (_this.index > 4) {
|
_this.index = 4;
|
}
|
} else if (delta < 0) {
|
// 向下滚
|
_this.index = _this.index - 0.1;
|
if (_this.index < 0.1) {
|
_this.index = 0.1;
|
}
|
}
|
_this.imgViewContent.style.marginLeft =
|
_this.imgMarginLeft - ((_this.index - 1) * _this.imgWidth) / 2 + "px";
|
_this.imgViewContent.style.marginTop =
|
_this.imgMarginTop - ((_this.index - 1) * _this.imgHeight) / 2 + "px";
|
event.target.style.width = _this.imgWidth * _this.index + "px";
|
event.target.style.height = _this.imgHeight * _this.index + "px";
|
},
|
// 鼠标按下事件(拖拽用)
|
mousedown: function (_this, event) {
|
event.preventDefault();
|
var imgWidth = _this.imgWidth * _this.index;
|
var imgHeight = _this.imgHeight * _this.index;
|
var rotateNum = _this.num * 90;
|
// 根据旋转的角度不同，坐标也不一样
|
if (
|
rotateNum % 90 == 0 &&
|
rotateNum % 180 != 0 &&
|
rotateNum % 270 != 0 &&
|
rotateNum % 360 != 0
|
) {
|
_this.startX = (imgWidth - imgHeight) / 2 + imgHeight - event.offsetY;
|
_this.startY = event.offsetX - (imgWidth - imgHeight) / 2;
|
} else if (rotateNum % 180 == 0 && rotateNum % 360 != 0) {
|
_this.startX = imgWidth - event.offsetX;
|
_this.startY = imgHeight - event.offsetY;
|
} else if (rotateNum % 270 == 0 && rotateNum % 360 != 0) {
|
_this.startX = (imgWidth - imgHeight) / 2 + event.offsetY;
|
_this.startY = imgWidth - event.offsetX - (imgWidth - imgHeight) / 2;
|
} else {
|
_this.startX = event.offsetX;
|
_this.startY = event.offsetY;
|
}
|
document.addEventListener("mousemove", mousemove);
|
document.addEventListener("mouseup", mouseup);
|
// 拖拽
|
function mousemove(event) {
|
_this.y = event.clientY - _this.startY - 10;
|
_this.x = event.clientX - _this.startX - 10;
|
_this.imgViewContent.style.marginTop = "" + _this.y + "px";
|
_this.imgViewContent.style.marginLeft = "" + _this.x + "px";
|
_this.imgViewContent.style.transition = "margin 0s";
|
}
|
// 鼠标放开
|
function mouseup() {
|
document.removeEventListener("mousemove", mousemove);
|
document.removeEventListener("mouseup", mouseup);
|
_this.imgViewContent.style.transition = "all 0.6s";
|
}
|
},
|
// 关闭
|
close: function (_this) {
|
var imgViewDiv = document.getElementById("imgViewDiv");
|
imgViewDiv.setAttribute("class", "img-view-dialog closing");
|
setTimeout(function () {
|
imgViewDiv.setAttribute("class", "img-view-dialog");
|
imgViewDiv.style.display = "none";
|
_this.num = 0;
|
}, 400);
|
},
|
// 旋转
|
rotate: function (_this) {
|
_this.num++;
|
_this.imgViewContent.style.transform =
|
"rotate(" + _this.num * 90 + "deg) scale(1, 1)";
|
},
|
// 上一张
|
prev: function (_this) {
|
var dialogImg = document.getElementById("dialogImg");
|
var thisSrc = dialogImg.attributes[2].value;
|
if (thisSrc.indexOf("width:") != -1 || thisSrc.indexOf("height:") != -1) {
|
thisSrc = dialogImg.attributes[3].value;
|
}
|
var dataList = _this.options.dataList;
|
var index = dataList.indexOf(thisSrc);
|
if (index > 0 && index <= dataList.length - 1) {
|
index = index - 1;
|
_this.checkImg(dataList[index], index);
|
}
|
},
|
// 下一张
|
next: function (_this) {
|
var dialogImg = document.getElementById("dialogImg");
|
var thisSrc = dialogImg.attributes[2].value;
|
if (thisSrc.indexOf("width:") != -1 || thisSrc.indexOf("height:") != -1) {
|
thisSrc = dialogImg.attributes[3].value;
|
}
|
var dataList = _this.options.dataList;
|
var index = dataList.indexOf(thisSrc);
|
if (index >= 0 && index < dataList.length - 1) {
|
index = index + 1;
|
_this.checkImg(dataList[index], index);
|
}
|
},
|
// 点击图片
|
checkImg: function (thisSrc, index) {
|
var _this = this;
|
_this.index = 1;
|
_this.num = 0;
|
_this.dialogImg.style.transform = "";
|
_this.imgViewContent.setAttribute("class", "img-view-content");
|
_this.getWindowWH();
|
if (index == 0) {
|
_this.btnPrev.style.display = "none";
|
} else if (index == dataList.length - 1) {
|
_this.btnNext.style.display = "none";
|
} else {
|
_this.btnPrev.style.display = "block";
|
_this.btnNext.style.display = "block";
|
}
|
var image = new Image();
|
image.src = thisSrc;
|
var width = image.width;
|
var height = image.height;
|
var ww = 860;
|
var wh = _this.winHeight - 20;
|
if (width < ww && height < wh) {
|
width = width;
|
height = height;
|
} else {
|
var scale_x = width / ww;
|
var scale_y = height / wh;
|
if (scale_x > scale_y) {
|
var width = ww;
|
var height = parseInt(height / scale_x);
|
} else {
|
var width = parseInt(width / scale_y);
|
var height = wh;
|
}
|
}
|
_this.imgWidth = width;
|
_this.imgHeight = height;
|
var left = (_this.winWidth - width) / 2;
|
var top = (_this.winHeight - height) / 2;
|
_this.imgMarginLeft = left;
|
_this.imgMarginTop = top;
|
_this.imgViewContent.style.cssText =
|
"margin-top:" + top + "px; margin-left:" + left + "px";
|
_this.dialogImg.style.cssText =
|
"width:" + width + "px; height:" + height + "px;";
|
setTimeout(function () {
|
_this.dialogImg.setAttribute("src", thisSrc);
|
_this.imgViewContent.setAttribute("class", "img-view-content loadingImg");
|
}, 600);
|
},
|
// 获取浏览器宽高
|
getWindowWH: function () {
|
var _this = this;
|
if (window.innerWidth) _this.winWidth = window.innerWidth;
|
else if (document.body && document.body.clientWidth)
|
_this.winWidth = document.body.clientWidth;
|
// 获取窗口高度
|
if (window.innerHeight) _this.winHeight = window.innerHeight;
|
else if (document.body && document.body.clientHeight)
|
_this.winHeight = document.body.clientHeight;
|
// 通过深入 Document 内部对 body 进行检测，获取窗口大小
|
if (
|
document.documentElement &&
|
document.documentElement.clientHeight &&
|
document.documentElement.clientWidth
|
) {
|
_this.winHeight = document.documentElement.clientHeight;
|
_this.winWidth = document.documentElement.clientWidth;
|
}
|
},
|
};
|
window.ImgView = ImgView;
|
|
module.exports = {
|
ImgView,
|
};
|
// })(window, document);
|
