<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrap {
width: 1000px;
height: 800px;
position: relative;
border: 1px solid red;
}
.wrap img {
width: 100%;
height: 100%;
}
.box {
width: 200px;
height: 200px;
position: absolute;
border-radius: 50%;
top: 0px;
left: 0px;
overflow: hidden;
}
.box img {
width: 2000px;
height: 1600px;
}
</style>
</head>
<body>
<div class="wrap">
<img src="img/wa.png" />
<div class="box">
<img src="img/wa.png" />
</div>
</div>
</body>
<script type="text/javascript">
var wrap = document.querySelector('.wrap');
var box = document.querySelector('.box');
var boxImg = document.querySelector('.box img');
wrap.onmousemove = function() {
var e = window.event || event;
box.style.display = 'inline-block';
var disX = e.clientX - box.offsetWidth / 2;
var disY = e.clientY - box.offsetHeight / 2;
if(disX <= 0) {
disX = 0;
}
if(disX >= (wrap.offsetWidth - box.offsetWidth)) {
disX = wrap.offsetWidth - box.offsetWidth;
}
if(disY <= 0) {
disY = 0;
}
if(disY >= (wrap.offsetHeight - box.offsetHeight)) {
disY = wrap.offsetHeight - box.offsetHeight;
}
box.style.left = disX + 'px';
box.style.top = disY + 'px';
var scaleX = box.offsetLeft / (wrap.offsetWidth - box.offsetWidth);
var scaleY = box.offsetTop / (wrap.offsetHeight - box.offsetHeight);
box.scrollLeft = (boxImg.offsetWidth - box.offsetWidth) * scaleX;
box.scrollTop = (boxImg.offsetHeight - box.offsetHeight) * scaleY;
}
</script>