<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.imgBox {
background-color: #ccc;
}
.imgBox img {
border: 1px solid #000;
cursor: pointer;
}
</style>
</head>
<body>
<div class="imgBox">
<img src="./images/1.jpg" alt="">
</div>
<script>
function showBigImg (url) {
// 获取可视区域的宽高
var bodyW = document.body.clientWidth;
var bodyH = document.body.clientHeight;
// 创建弹出层
var div = document.createElement('div');
div.setAttribute('style', 'display: none;cursor: pointer;position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.3)');
div.style.width = bodyW + 'px';
div.style.height = bodyH + 'px';
document.getElementsByTagName('body')[0].appendChild(div);
if (typeof url === 'string') {
div.style.display = 'block';
}
// 创建图片盒子
var img = new Image();
img.src = url;
div.appendChild(img);
var size = 0;
// 图片加载之后
img.onload = function () {
img.setAttribute('style', 'position: relative');
// 蒙层宽高
var divW = div.style.width.split('p')[0];
var divH = div.style.height.split('p')[0];
var imgW = img.width;
var imgH = img.height;
// 宽比高大
if (imgW >= imgH) {
var showH = imgH / imgW * divW;
// 计算后的高度大于蒙层高度
if (showH > divH) {
img.style.height = divH + 'px';
img.style.left = (divW - imgW / imgH * divH) / 2 + 'px';
} else {
img.style.width = divW + 'px';
img.style.top = (divH - showH) / 2 + 'px';
}
} else {
var showW = imgW / imgH * divH;
img.style.width = divW + 'px';
img.style.left = (divW - showW) / 2 + 'px';
}
}
// 鼠标的滚动放大
function mWheel (e) {
var ev = e || window.event;
var dir = ev.detail ? ev.detail * (-120) : ev.wheelDelta;
if (dir > 0) {
size += dir / 1000;
img.style.transform = `scale(${1 + size})`;
} else {
size += dir / 1000;
if (size < -1) {
size = -1;
img.style.transform = `scale(${1 + size})`;
return;
}
img.style.transform = `scale(${1 + size})`;
}
}
// 判断浏览器滚轮事件支持
var mouseWheelEvent = /Firefox/i.test(navigator.userAgent) ? 'DOMMouseScroll' : 'mousewheel';
if (div.attachEvent) {
// ie opera Firefox
div.attachEvent('on' + mouseWheelEvent, mWheel);
} else if (div.addEventListener) {
// W3C
div.addEventListener(mouseWheelEvent, mWheel, false);
}
// 移动图片
div.onmousedown = function (e) {
var ev = e || window.event;
var flaginner = true;
// 鼠标点击的坐标
var mouseX = ev.pageX;
var mouseY = ev.pageY;
// 鼠标在图片中的坐标
var imgMouseX = mouseX - img.offsetLeft;
var imgMouseY = mouseY - img.offsetTop;
this.onmousemove = function (e) {
ev = e || window.event;
console.log(ev, 'mousemove');
// 鼠标移动的坐标
var mouseX2 = ev.pageX;
var mouseY2 = ev.pageY;
if (mouseX - mouseX2 > 5 || mouseY - mouseY2 > 5 || mouseX2 - mouseX > 5 || mouseY2 - mouseY > 5) {
flaginner = false;
}
ev.preventDefault();
var moveX = mouseX2 - imgMouseX;
var moveY = mouseY2 - imgMouseY;
img.style.left = moveX + 'px';
img.style.top = moveY + 'px';
};
this.onmouseup = function () {
if (flaginner) {
if (this.isIE || this.isIE11) {
this.removeNode(true);
} else {
this.remove();
}
this.isIE = function isIE() {
if (!!window.ActiveXObject || 'ActiveXObject' in window) {
// ie浏览器
return true;
} else {
return false;
}
}
this.isIE11 = function isIE11() {
if (/Trident\/7\./.test(navigator.userAgent)) {
return true;
} else {
return false;
}
}
}
this.onmousemove = null;
this.onmouseup = null;
};
// disable default wheel action of scrolling page
if (ev.preventDefault) {
ev.preventDefault();
} else {
return false;
}
}
}
document.querySelector('img').onclick = function (e) {
e.preventDefault();
showBigImg('./images/1.jpg');
};
</script>
</body>
</html>