<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<style type="text/css">
.zoom-div {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 999;
display: flex;
justify-content: center;
align-items: center;
cursor: grab;
}
#box {
position: absolute;
}
.zoom-div img {
/* 200px;
height: 200px;
position: absolute;*/
/*top: 50%;
left: 50%;
transform: translate(-50%, -50%);*/
z-index: 1000;
}
</style>
</head>
<body>
<div class="zoom-div" id="father" onmousewheel="return bbimg(this)">
<div id="box">
<img border="0" src="https://qqadapt.qpic.cn/txdocpic/0/b2702e33487dca1d4dea09d3c52ae586/0?_type=png&w=1268&h=572">
</div>
</div>
</body>
<script language="javascript">
var zoom = 1;
function bbimg(o) {
o = document.getElementById('box');
zoom += event.wheelDelta / 40;
if(zoom > 0) o.style.transform = 'scale(' + zoom + ')';
return false;
}
var fa = document.getElementById('father');
var box = document.getElementById('box');
box.onmousedown = function(ev) {
var oEvent = ev;
// 浏览器有一些图片的默认事件,这里要阻止
oEvent.preventDefault();
var disX = oEvent.clientX - box.offsetLeft;
var disY = oEvent.clientY - box.offsetTop;
fa.onmousemove = function(ev) {
oEvent = ev;
oEvent.preventDefault();
var x = oEvent.clientX - disX;
var y = oEvent.clientY - disY;
// 图形移动的边界判断
// x = x <= 0 ? 0 : x;
// x = x >= fa.offsetWidth-box.offsetWidth ? fa.offsetWidth-box.offsetWidth : x;
// y = y <= 0 ? 0 : y;
// y = y >= fa.offsetHeight-box.offsetHeight ? fa.offsetHeight-box.offsetHeight : y;
box.style.left = x + 'px';
box.style.top = y + 'px';
}
// 图形移出父盒子取消移动事件,防止移动过快触发鼠标移出事件,导致鼠标弹起事件失效
fa.onmouseleave = function() {
fa.onmousemove = null;
fa.onmouseup = null;
}
// 鼠标弹起后停止移动
fa.onmouseup = function() {
fa.onmousemove = null;
fa.onmouseup = null;
}
}
</script>
</html>