208 lines
6.7 KiB
JavaScript
208 lines
6.7 KiB
JavaScript
class PreviewImage {
|
||
body = this.$("body");
|
||
option = {};
|
||
isBackMove = false;
|
||
x1 = 0;
|
||
y1 = 0;
|
||
l = 0;
|
||
t = 0;
|
||
|
||
constructor(option) {
|
||
if (!option.hasOwnProperty("image")) {
|
||
throw new Error("参数image缺少，请检查")
|
||
}
|
||
|
||
if (!option.hasOwnProperty("showIndex")) {
|
||
throw new Error("参数showIndex缺少，请检查")
|
||
}
|
||
|
||
this.option = option
|
||
//调用的方法
|
||
this.created();
|
||
this.BindClose();
|
||
this.BindPrevious();
|
||
this.BindNext();
|
||
this.BindSuoXiao();
|
||
this.BindFangDa();
|
||
this.BindFullScreen();
|
||
this.BindXuanZhuan();
|
||
this.MouseEvent();
|
||
}
|
||
created() { //插入元素
|
||
this.body.insertAdjacentHTML("beforeend", `<div class="previewImage">
|
||
<div class="zhezhao"></div>
|
||
<div class="preview">
|
||
<div class="closed">x</div>
|
||
|
||
<div class="action">
|
||
<div class="left d"><</div>
|
||
<div class="right d">></div>
|
||
</div>
|
||
|
||
<img class="mainImg" style="transform: scale(1) rotate(0deg);margin-left: 0;margin-top: 0;"
|
||
src="${this.option.image[this.option.showIndex]}" alt="">
|
||
|
||
<ul class="operation">
|
||
<li>
|
||
<i class="iconfont icon-suoxiao suoxiao"></i>
|
||
</li>
|
||
<li>
|
||
<i class="iconfont icon-fangda fangda"></i>
|
||
</li>
|
||
<li>
|
||
<i class="iconfont icon-fullscreen fullscreen"></i>
|
||
</li>
|
||
<li class="xz">
|
||
<i class="iconfont icon-shuaxin leftshuaxin"></i>
|
||
</li>
|
||
<li>
|
||
<i class="iconfont icon-shuaxin rightshuaxin"></i>
|
||
</li>
|
||
</ul>
|
||
|
||
|
||
</div>
|
||
</div>`)
|
||
|
||
}
|
||
BindSuoXiao() {
|
||
this.$(".suoxiao").onclick = () => {
|
||
var value = this.Scale() - 0.2;
|
||
if (value != 0) {
|
||
this.$(".mainImg").style.transform = `scale(${value}) rotate(${this.Rotate()}deg)`
|
||
}
|
||
}
|
||
}
|
||
BindFullScreen() {
|
||
|
||
this.$(".fullscreen").onclick = () => {
|
||
if (this.$(".fullscreen").classList.contains("icon-fullscreen")) {
|
||
this.$(".fullscreen").classList.remove("icon-fullscreen")
|
||
this.$(".fullscreen").classList.add("icon-suoxiao1")
|
||
|
||
this.$(".mainImg").style = `
|
||
transform: scale(2) rotate(${this.Rotate()}deg);
|
||
margin-left: 0;
|
||
margin-top: 0;
|
||
`
|
||
|
||
} else {
|
||
this.$(".fullscreen").classList.remove("icon-suoxiao1")
|
||
this.$(".fullscreen").classList.add("icon-fullscreen")
|
||
|
||
this.$(".mainImg").style = `
|
||
transform: scale(1) rotate(0deg);
|
||
margin-left: 0;
|
||
margin-top: 0;
|
||
`
|
||
}
|
||
}
|
||
}
|
||
BindFangDa() {
|
||
this.$(".fangda").onclick = () => {
|
||
this.$(".mainImg").style.transform = `scale(${this.Scale() + 0.2}) rotate(${this.Rotate()}deg)`
|
||
}
|
||
}
|
||
BindXuanZhuan() {
|
||
this.$(".leftshuaxin").onclick = () => {
|
||
this.xuanzhuan(-90)
|
||
}
|
||
this.$(".rightshuaxin").onclick = () => {
|
||
this.xuanzhuan(90)
|
||
}
|
||
}
|
||
|
||
MouseEvent() {
|
||
document.onmousewheel = (e) => {
|
||
if (e.wheelDelta == 210) {
|
||
this.$(".fangda").onclick()
|
||
} else {
|
||
this.$(".suoxiao").onclick()
|
||
}
|
||
}
|
||
this.$(".mainImg").onmousedown = (e) => {
|
||
|
||
e.preventDefault()
|
||
|
||
this.isBackMove = true
|
||
this.x1 = e.clientX;
|
||
this.y1 = e.clientY;
|
||
|
||
this.l = parseInt(this.$(".mainImg").style.marginLeft);
|
||
this.t = this.$(".mainImg").offsetTop;
|
||
|
||
this.ImgMove(".mainImg")
|
||
}
|
||
this.$(".mainImg").onmouseleave = () => {
|
||
console.log("绑定鼠标移动事件");
|
||
if (this.isBackMove) {
|
||
this.ImgMove(".preview")
|
||
}
|
||
}
|
||
this.$(".preview").onmouseup = (ev) => {
|
||
console.log("鼠标在背景层上松开");
|
||
this.isBackMove = false
|
||
this.$(".mainImg").onmousemove = null;
|
||
this.$(".preview").onmousemove = null;
|
||
}
|
||
this.$(".mainImg").onmouseup = (ev) => {
|
||
console.log("鼠标在图片上松开");
|
||
this.$(".mainImg").onmousemove = null;
|
||
this.$(".preview").onmousemove = null;
|
||
}
|
||
}
|
||
|
||
ImgMove(className) {
|
||
this.$(className).onmousemove = (ev) => {
|
||
var x2 = ev.clientX;
|
||
var y2 = ev.clientY;
|
||
var x = x2 - this.x1;
|
||
var y = y2 - this.y1;
|
||
var lt = y + this.t;
|
||
var ls = x + this.l;
|
||
this.$(".mainImg").style.marginLeft = ls + 'px';
|
||
this.$(".mainImg").style.marginTop = lt + 'px';
|
||
}
|
||
}
|
||
|
||
xuanzhuan(offset) {
|
||
this.$(".mainImg").style.transform = `scale(${this.Scale()}) rotate(${this.Rotate() + offset}deg)`
|
||
}
|
||
BindClose() {
|
||
this.$(".closed").onclick = () => {
|
||
this.body.removeChild(this.$(".previewImage"))
|
||
}
|
||
}
|
||
BindPrevious() {
|
||
this.$(".left").onclick = () => {
|
||
this.option.showIndex -= 1;
|
||
if (this.option.showIndex < 0) {
|
||
this.option.showIndex = this.option.image.length - 1
|
||
}
|
||
this.$(".mainImg").src = this.option.image[this.option.showIndex]
|
||
}
|
||
}
|
||
BindNext() {
|
||
this.$(".right").onclick = () => {
|
||
this.option.showIndex += 1;
|
||
if (this.option.showIndex > this.option.image.length - 1) {
|
||
this.option.showIndex = 0
|
||
}
|
||
this.$(".mainImg").src = this.option.image[this.option.showIndex]
|
||
}
|
||
}
|
||
|
||
Scale() {
|
||
return Number(this.$(".mainImg").style.transform.match(/scale\(([\s\S]*?)\) /)[1])
|
||
}
|
||
|
||
Rotate() {
|
||
return Number(this.$(".mainImg").style.transform.match(/rotate\(([\s\S]*?)deg\)/)[1])
|
||
}
|
||
//封装
|
||
$(className) {
|
||
return document.querySelector(className)
|
||
}
|
||
|
||
|
||
} |