177 lines
4.1 KiB
JavaScript
177 lines
4.1 KiB
JavaScript
/**
|
|
* @file 预览图片
|
|
* @author mazhaobo
|
|
* @email mazhaobo@hoteamsoft.com
|
|
*/
|
|
|
|
(function (window, document) {
|
|
function Viewer() {
|
|
let scale = 1;
|
|
|
|
// 劫持操作
|
|
Object.defineProperties(this, {
|
|
visible: {
|
|
set: function (bool) {
|
|
if (!bool) {
|
|
this.dialog.setAttribute("hidden", "hidden");
|
|
} else {
|
|
this.dialog.removeAttribute("hidden");
|
|
}
|
|
},
|
|
},
|
|
src: {
|
|
set: function (src) {
|
|
this.img && this.img.setAttribute("src", src);
|
|
},
|
|
},
|
|
scale: {
|
|
get: function () {
|
|
return scale;
|
|
},
|
|
set: function (num) {
|
|
scale = num;
|
|
if (!this.img.naturalWidth) {
|
|
return;
|
|
}
|
|
Object.assign(this.img.style, {
|
|
width: `${this.img.naturalWidth * num}px`,
|
|
height: `${this.img.naturalHeight * num}px`,
|
|
});
|
|
},
|
|
},
|
|
});
|
|
}
|
|
|
|
// 初始化
|
|
Viewer.prototype.init = function () {
|
|
this.renderDialog();
|
|
this.setScrollEvent();
|
|
this.setKeyPressEvent();
|
|
document.body.appendChild(this.dialog);
|
|
};
|
|
|
|
// 打开
|
|
Viewer.prototype.open = function (src) {
|
|
if (!this.dialog) {
|
|
this.init();
|
|
}
|
|
this.src = src;
|
|
this.visible = true;
|
|
this.reset();
|
|
};
|
|
|
|
// 重置
|
|
Viewer.prototype.reset = function () {
|
|
Object.assign(this.img.style, {
|
|
"margin-top": "",
|
|
"margin-left": "",
|
|
});
|
|
this.scale = 1;
|
|
};
|
|
|
|
// 外层盒子
|
|
Viewer.prototype.renderDialog = function () {
|
|
const dialog = document.createElement("div");
|
|
this.dialog = dialog;
|
|
|
|
Object.assign(dialog.style, {
|
|
position: "fixed",
|
|
top: 0,
|
|
left: 0,
|
|
"z-index": "999",
|
|
width: "100vw",
|
|
height: "100vh",
|
|
background: "rgba(0, 0, 0, 0.2)",
|
|
overflow: "hidden",
|
|
});
|
|
|
|
this.renderImage();
|
|
this.renderClose();
|
|
dialog.appendChild(this.img);
|
|
};
|
|
|
|
// 图片
|
|
Viewer.prototype.renderImage = function () {
|
|
const img = document.createElement("img");
|
|
this.img = img;
|
|
|
|
img.src = this.src;
|
|
|
|
Object.assign(img.style, {
|
|
position: "absolute",
|
|
top: "50vh",
|
|
left: "50vw",
|
|
transform: "translate(-50%, -50%)",
|
|
"object-fit": "contain",
|
|
});
|
|
};
|
|
|
|
// 关闭按钮
|
|
Viewer.prototype.renderClose = function () {
|
|
const _self = this;
|
|
const close = document.createElement("button");
|
|
this.dialog.appendChild(close);
|
|
|
|
close.innerText = "关闭";
|
|
Object.assign(close.style, {
|
|
position: "absolute",
|
|
fontWeight:'bold',
|
|
top: "30px",
|
|
right: "50px",
|
|
padding:'5px',
|
|
"z-index": "2000",
|
|
border: "none",
|
|
borderRadius:'5px',
|
|
background: "#3979f9",
|
|
outline: "none",
|
|
color: "#fff",
|
|
cursor: "pointer",
|
|
"user-drag": "none",
|
|
});
|
|
close.addEventListener("click", function (e) {
|
|
_self.visible = false;
|
|
});
|
|
};
|
|
|
|
// 滚动调整大小
|
|
Viewer.prototype.setScrollEvent = function () {
|
|
const support = "onwheel" in document.createElement("div") ? "wheel" : "mousewheel";
|
|
const _self = this;
|
|
this.dialog.addEventListener(support, function (e) {
|
|
if (e.deltaY > 0) {
|
|
_self.scale = Math.max(0.1, _self.scale - 0.1);
|
|
} else {
|
|
_self.scale = Math.min(5, _self.scale + 0.1);
|
|
}
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
});
|
|
this.dialog.addEventListener("mousemove", function (e) {
|
|
if (e.buttons === 1) {
|
|
const { marginLeft, marginTop } = _self.img.style;
|
|
const left = `${parseInt(marginLeft || 0) + e.movementX}px`;
|
|
const top = `${parseInt(marginTop || 0) + e.movementY}px`;
|
|
|
|
Object.assign(_self.img.style, {
|
|
"margin-left": left,
|
|
"margin-top": top,
|
|
});
|
|
}
|
|
e.preventDefault();
|
|
});
|
|
};
|
|
|
|
// 设置按键
|
|
Viewer.prototype.setKeyPressEvent = function () {
|
|
const _self = this;
|
|
window.addEventListener("keydown", function (e) {
|
|
if (e.code === "Escape") {
|
|
_self.visible = false;
|
|
}
|
|
});
|
|
};
|
|
|
|
// 单例模式
|
|
window.Viewer = new Viewer();
|
|
})(window, document);
|