- 思路：
- 鼠标经过，显示/隐藏mask和rightBox图片
- 当鼠标在盒子中移动的时候，mask和鼠标一起移动
- 当mask移动的时候，让大图片移动
- 求出box元素距离页面的偏移量
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header{
height: 60px;
line-height: 60px;
text-align: center;
border-bottom: 1px solid #ccc;
}
.main{
display: flex;
height: calc(100vh - 60px);
}
.main .nav{
width: 200px;
display: flex;
align-content: center;
justify-content: center;
border-right: 1px solid #ccc;
}
.wrapper{
position: relative;
margin-top: 20px;
margin-left: 20px;
padding: 20px;
border: 5px solid orange;
display: flex;
}
.box{
position: relative;
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
.box img{
width: 100%;
height: 100%;
}
.box .mask{
width: 150px;
height: 150px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0px;
left: 0px;
cursor: move;
display: none;
}
.right{
position: relative;
width: 400px;
height: 400px;
margin-left: 20px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.right img{
position: absolute;
width: 800px;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="main">
<div class="nav">
导航
</div>
<div class="wrapper">
<div class="box">
<img src="img/city12.jpg">
<div class="mask"></div>
</div>
<div class="right">
<img src="img/city12.jpg">
</div>
</div>
</div>
<script>
var wrapper = document.querySelector('.wrapper');
var box = document.querySelector('.box');
var mask = document.querySelector('.mask');
var rightBox = document.querySelector('.right');
var rightImg = document.querySelector('.right img');
// mouseover mouseout 会触发冒泡事件
// mouseenter mouseleave 则不会
box.onmouseenter = function(e){
mask.style.display = 'block';
rightBox.style.display = 'block';
}
box.onmouseleave = function(){
mask.style.display = 'none';
rightBox.style.display = 'none';
}
box.onmousemove = function(e){
e = e || window.event;
// 1. 鼠标在box中的X,Y距离 = 鼠标在页面中的位置 - box盒子的偏移量;
var maskX = e.pageX - getElementLeft(box);
var maskY = e.pageY - getElementTop(box);
// 2. 让鼠标出现在mask的中心点;
maskX = maskX - mask.offsetWidth / 2;
maskY = maskY - mask.offsetHeight / 2;
// 3. 把鼠标限制在box中;
maskX = maskX < 0 ? 0 : maskX;
maskX = maskX > (box.offsetWidth - mask.offsetWidth)?(box.offsetWidth - mask.offsetWidth):maskX;
maskY = maskY < 0 ? 0 : maskY;
maskY = maskY > (box.offsetHeight - mask.offsetHeight)?(box.offsetHeight - mask.offsetHeight):maskY;
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
// 4. mask最大移动距离; 右侧大图片最大能移动距离
var maskMax = box.offsetWidth - mask.offsetWidth;
var bigImgMax = rightImg.offsetWidth - rightBox.offsetWidth;
var bigImgX = maskX * bigImgMax / maskMax;
var bigImgY = maskY * bigImgMax / maskMax;
rightImg.style.left = -bigImgX + 'px';
rightImg.style.top = -bigImgY + 'px';
}
// 求定位元素距离页面的偏移量
function getElementLeft(eleObj){
var currentLeft = eleObj.offsetLeft;
var parent = eleObj.offsetParent;
// 最外层就是<body/>, body.offsetParent是null.
while(parent != null){
// 当前元素做偏移量 + 父元素的左边border宽度 + 父元素的左偏移量
currentLeft = currentLeft + parent.clientLeft + parent.offsetLeft;
parent = parent.offsetParent;
}
return currentLeft;
}
function getElementTop(eleObj){
var currentLeft = eleObj.offsetTop;
var parent = eleObj.offsetParent;
while(parent != null){
currentLeft = currentLeft + parent.clientTop + parent.offsetTop;
parent = parent.offsetParent;
}
return currentLeft;
}
</script>
</body>
</html>
-
简易版
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.wrapper{
position: relative;
margin-top: 50px;
margin-left: 200px;
width: 300px;
height: 300px;
}
.box{
position: relative;
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
.box img{
width: 100%;
height: 100%;
}
.box .mask{
width: 150px;
height: 150px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0px;
left: 0px;
cursor: move;
display: none;
}
.right{
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 320px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.right img{
position: absolute;
width: 800px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
<img src="img/city12.jpg">
<div class="mask"></div>
</div>
<div class="right">
<img src="img/city12.jpg">
</div>
</div>
<script>
var wrapper = document.querySelector('.wrapper');
var box = document.querySelector('.box');
var mask = document.querySelector('.mask');
var rightBox = document.querySelector('.right');
var rightImg = document.querySelector('.right img');
// mouseover mouseout 会触发冒泡事件
// mouseenter mouseleave 则不会
box.onmouseenter = function(e){
mask.style.display = 'block';
rightBox.style.display = 'block';
}
box.onmouseleave = function(){
mask.style.display = 'none';
rightBox.style.display = 'none';
}
box.onmousemove = function(e){
e = e || window.event;
// 1. 鼠标在box中的X,Y距离 = 鼠标在页面中的位置 - box盒子的偏移量;
var maskX = e.pageX - wrapper.offsetLeft;
var maskY = e.pageY - wrapper.offsetTop;
// 2. 让鼠标出现在mask的中心点;
maskX = maskX - mask.offsetWidth / 2;
maskY = maskY - mask.offsetHeight / 2;
// 3. 把鼠标限制在box中;
maskX = maskX < 0 ? 0 : maskX;
maskX = maskX > (wrapper.offsetWidth - mask.offsetWidth)?(wrapper.offsetWidth - mask.offsetWidth):maskX;
maskY = maskY < 0 ? 0 : maskY;
maskY = maskY > (wrapper.offsetHeight - mask.offsetHeight)?(wrapper.offsetHeight - mask.offsetHeight):maskY;
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
// 4. mask最大移动距离; 右侧大图片最大能移动距离
var maskMax = wrapper.offsetWidth - mask.offsetWidth;
var bigImgMax = rightImg.offsetWidth - rightBox.offsetWidth;
var bigImgX = maskX * bigImgMax / maskMax;
var bigImgY = maskY * bigImgMax / maskMax;
rightImg.style.left = -bigImgX + 'px';
rightImg.style.top = -bigImgY + 'px';
}
</script>
</body>
</html>
