<body style="width: 2000px;height: 2000px;">
<div id="wrap_small">
<img src="img/small.png" />
<div id="zoom"></div>
<div id="wrap_big">
<img src="img/big.png" />
</div>
</div>
</body>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrap_small {
width: 500px;
height: 500px;
position: relative;
left: 0;
right: 0;
margin: 100px auto;
}
#wrap_small>img {
position: absolute;
left: 0;
top: 0;
}
#wrap_big {
width: 500px;
height: 500px;
position: absolute;
left: 600px;
top: 0;
overflow: hidden;
display: none;
}
#wrap_big>img {
position: absolute;
left: 0;
top: 0;
}
#zoom {
width: 100px;
height: 100px;
background: rgba(0, 0, 0, 0.4);
position: absolute;
left: 0;
top: 0;
display: none;
}
</style>
<script type="text/javascript">
var wrapSmall = document.getElementById("wrap_small");
var zoom = document.getElementById("zoom");
var wrapBig = document.getElementById("wrap_big");
var bigImg = wrapBig.getElementsByTagName('img')[0];
wrapSmall.onmouseenter = function() {
zoom.style.display = 'block';
wrapBig.style.display = 'block';
var scaleLeft = (wrapBig.offsetWidth - bigImg.offsetWidth) / (wrapSmall.offsetWidth - zoom.offsetWidth);
var scaleTop = (wrapBig.offsetHeight - bigImg.offsetHeight) / (wrapSmall.offsetHeight - zoom.offsetHeight);
wrapSmall.onmousemove = function(e) {
zoom.style.left = e.clientX + document.documentElement.scrollLeft - wrapSmall.offsetLeft - zoom.offsetWidth / 2 + 'px';
zoom.style.top = e.clientY + document.documentElement.scrollTop - wrapSmall.offsetTop - zoom.offsetHeight / 2 + 'px';
if (zoom.offsetLeft <= 0) {
zoom.style.left = 0;
}
if (zoom.offsetTop <= 0) {
zoom.style.top = 0;
}
if (zoom.offsetLeft >= wrapSmall.offsetWidth - zoom.offsetWidth) {
zoom.style.left = wrapSmall.offsetWidth - zoom.offsetWidth + 'px';
}
if (zoom.offsetTop >= wrapSmall.offsetHeight - zoom.offsetHeight) {
zoom.style.top = wrapSmall.offsetHeight - zoom.offsetHeight + 'px';
}
bigImg.style.left = zoom.offsetLeft * scaleLeft + 'px';
bigImg.style.top = zoom.offsetTop * scaleTop + 'px';
}
}
wrapSmall.onmouseleave = function() {
zoom.style.display = 'none';
wrapBig.style.display = 'none';
wrapSmall.onmousemove = null;
}
</script>