<style>
*{
margin:0px;
padding: 0px;
}
.leftBox{
width: 400px;
height: 400px;
margin:20px 0px 0px 30px;
position: relative;
}
.leftBox img{
width: 100%;
height: 100%;
}
.mark{
width: 200px;
height: 200px;
background: rgba(0,0,0,0.3);
position: absolute;
top:0px;
left: 0px;
display: none;
}
.rightBox{
/* 原生图片的大小宽高是800px 800px,这里右边盒子的宽高设为400px 400px,就可以实现显示图片的1/4 */
width: 400px;
height: 400px;
position: absolute;
top:20px;
/* 左边的边框宽度是400px,不能盖住左边的框,所以移动450px */
left: 450px;
/* 把图片溢出右边盒子的部分给隐藏 */
overflow: hidden;
display: none;
}
.rightBox img{
position: absolute;
}
</style>
<div class="leftBox">
<!-- 图片 -->
<img src="./imgs/1.jpg">
<!-- 遮罩层 -->
<div class="mark"></div>
</div>
<div class="rightBox">
<!-- 区域放大后的图片 -->
<img src="./imgs/1.jpg">
</div>
<script>
/*
思路;
1、制作页面效果
2、确定事件类型:onmouseover、onmouseout、onmousemove
3、明确如何计算遮藏层移动距离=光标相对于页面的距离-大盒子相对于页面的距离
4、遮藏层移动端额方向跟右边大盒子中图片的移动方向相反
*/
//获取操作对象
var leftBox=document.querySelector(".leftBox")
var mark=document.querySelector(".mark")
var rightBox=document.querySelector(".rightBox")
//给左边大盒子对象绑定事件
leftBox.onmouseover=function(){
//显示隐藏的盒子
mark.style.display='block'
rightBox.style.display='block'
}
leftBox.onmouseout=function(){
//隐藏指定盒子
mark.style.display='none'
rightBox.style.display='none'
}
leftBox.onmousemove=function(e){
//兼容事件对象
var e = e || window.event
//获取移动距离
//光标距离页面左边的距离-左盒子距离页面左边的距离-蒙版宽度的一半
var left1=e.clientX-leftBox.offsetLeft-parseInt(mark.offsetWidth/2)
var top1=e.clientY-leftBox.offsetTop-parseInt(mark.offsetHeight/2)
//设置边界条件
//用大盒子(左边盒子)的宽度-小盒子(即遮罩层)的宽度
var maxX=leftBox.offsetWidth-mark.offsetWidth
var maxY=leftBox.offsetHeight-mark.offsetHeight
//右边图片移动的距离
var imgLeft,imgTop
//水平方向的判断
//此时遮罩层在左盒子的最左边
if(left1<=0){
mark.style.left="0px"
imgLeft=0
//此时遮罩层在左盒子的最右侧
}else if(left1>=maxX){
mark.style.left=maxX+'px'
imgLeft=maxX
}else{
mark.style.left=left1+'px'
imgLeft=left1
}
//垂直方向
if(top1<=0){
mark.style.top="0px"
imgTop=0
}else if(top1>=maxY){
mark.style.top=maxY+'px'
imgTop=maxY
}else{
mark.style.top=top1+'px'
imgTop=top1
}
//获取右边盒子中的图片
var img=rightBox.querySelector("img")
//给右边图片设置偏移量
//左盒子里面移动200px 右盒子里面的图片就移动400px 实现等比放大
img.style.left=-2*imgLeft+'px'
img.style.top=-2*imgTop+'px'
}
</script>