效果如图
所用知识点
- offsetTop属性:
此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为relative、absolute或者fixed。
返回值是一个整数，单位是像素。
- offsetLeft属性:
此属性和offsetTop的原理是一样的，只不过方位不同，这里就不多介绍了。
- offsetWidth属性:
此属性可以获取元素的宽度，宽度值包括:元素内容+内边距+边框。不包括外边距和滚动条部分。
返回值是一个整数，单位是像素。
此属性是只读的。
- offsetHeight属性:
此属性可以获取元素的高度，宽度值包括:元素内容+内边距+边框。不包括外边距和滚动条部分。
返回值是一个整数，单位是像素。
- clientX 鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标； 不随滚动条滚动而改变；
- clientY 鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标； 不随滚动条滚动而改变；
计算如图
代码
<!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>
</head>
<style>
* {
padding: 0;
margin: 0;
}
.leftcon {
width: 350px;
height: 350px;
position: relative;
float: left;
box-shadow: 0px 0px 10px 0px rgb(65, 64, 64);
margin: 20px 15px;
}
.picl {
display: block;
width: 100%;
height: 100%;
}
.mask {
width: 175px;
height: 175px;
background-color: #000;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
cursor: move;
display: none;
}
.rightcon {
width: 350px;
height: 350px;
position: relative;
float: left;
overflow: hidden;
margin-top: 20px;
display: none;
}
.picr {
display: block;
width: 200%;
height: 200%;
position: absolute;
left: 0px;
top: 0px;
}
</style>
<body>
<div class="leftcon" id="leftbox">
<img src="pic2.jpg" class="picl">
<div class="mask"></div>
</div>
<div class="rightcon" id="rightbox">
<img src="pic2.jpg" class="picr">
</div>
<script>
var leftcon = document.getElementById('leftbox');
var rightcon = document.getElementById('rightbox');
var mask = document.getElementsByClassName('mask')[0];
var rpic = document.getElementsByClassName('picr')[0];
function getPoint(e) {
var e = e || window.event;
var top = e.clientY - leftcon.offsetTop - mask.offsetHeight / 2;
var left = e.clientX - leftcon.offsetLeft - mask.offsetWidth / 2;
var maxtop = leftcon.offsetHeight - mask.offsetHeight;
var maxleft = leftcon.offsetWidth - mask.offsetWidth;
var mintop = 0;
var minleft = 0;
var mvtop;
var mvleft;
if (top < mintop) {
mask.style.top = mintop + "px";
mvtop = mintop;
} else if (top > maxtop) {
mask.style.top = maxtop + "px";
mvtop = maxtop;
} else {
mask.style.top = top + "px";
mvtop = top;
}
if (left < minleft) {
mask.style.left = minleft + "px";
mvleft = minleft
} else if (left > maxleft) {
mask.style.left = maxleft + "px";
mvleft = maxleft
} else {
mask.style.left = left + "px";
mvleft = left;
}
rpic.style.top = -mvtop * 2 + "px";
rpic.style.left = -mvleft * 2 + "px";
}
leftcon.onmouseover=function(e){
var e = e||window.event;
rightcon.style.display="block";
mask.style.display="block";
getPoint(e);
}
leftcon.onmouseout=function(e){
var e = e||window.event;
rightcon.style.display="none";
mask.style.display="none";
}
leftcon.onmousemove = function(e){
var e=e||window.event;
getPoint(e);
}
</script>
</body>
</html>