CSS
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
overflow: hidden;
}
#min {
width: 350px;
height: 350px;
float: left;
border: 1px solid red;
position: relative;
margin-right: 20px;
}
#mask {
width: 100px;
height: 100px;
background-color: lightgray;
opacity: 0.2;
position: absolute;
top: 0;
left: 0;
display: none;
}
#max{
width: 350px;
height: 350px;
border: 1px solid black;
float: left;
position: relative;
overflow: hidden;
display: none;
}
#max Img{
position: absolute;
}
</style>
DOM
<div id="min">
![](img/min.jpg)
<div id="mask"></div>
</div>
<div id="max">
![](img/max.jpg);
</div>
JS
var oMin = document.getElementById("min"),
oMask = document.getElementById("mask"),
oMax = document.getElementById("max"),
oMaxImg = document.getElementById("maxImg");
oMin.onmouseover = function() {
oMask.style.display = "block";
oMax.style.display = "block";
}
oMin.onmouseout = function() {
oMask.style.display = "none";
oMax.style.display = "none";
}
//获取可移动范围
oMin.onmousemove = function(e) {
var e = e || window.event;
//获取鼠标相对自身的位置
//最大移动距离
console.log(oMin.clientWidth+"///"+oMask.offsetWidth);
var maxWidth = oMin.clientWidth - oMask.offsetWidth;
var maxHeight = oMin.clientHeight - oMask.offsetHeight;
//MX MY是 距离浏览器的边距离 - min的距左距离
var mX = e.pageX - oMin.offsetLeft;
var mY = e.pageY - oMin.offsetTop;
var currentLeft = mX - oMask.offsetWidth / 2;
var currentTop = mY - oMask.offsetHeight / 2;
console.log(currentLeft);
console.log(currentTop);
//获取灰色蒙版的左右位置
//判断临界值
if(currentLeft >= maxWidth) {
currentLeft = maxWidth;
} else if(currentLeft <= 0) {
currentLeft = 0;
}
if(currentTop >= maxHeight) {
currentTop = maxHeight;
} else if(currentTop <= 0) {
currentTop = 0;
}
//给灰色蒙版赋值 top left
oMask.style.left = currentLeft + 'px';
oMask.style.top = currentTop + 'px';
//比例系数
var ratioX = currentLeft / maxWidth;
var ratioY = currentTop / maxHeight;
oMaxImg.style.left = (oMax.clientWidth - oMaxImg.offsetWidth) * ratioX + "px";
oMaxImg.style.top = (oMax.clientHeight - oMaxImg.offsetHeight) * ratioY + "px";
}
网友评论