<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.bkk{
width:2000px;
height:1400px;
border: bisque 2px solid;
}
.imgess {width:400px;
height:500px;
border: bisque 2px solid;
left: 100px;
position: relative;
}
.imgess img{width:400px;
height:500px;
display: block;
float: left;
}
.zz{width:120px;
display: none;
height:240px;
background-color: rgb(172, 235, 110,.4);
position: absolute;
float: left;
}
.imgess .big{
top:-500px;
left: 800px;
width:800px;
height:700px;
float: left;
position: relative;
border: olive 2px solid;
overflow: hidden;
display: block;
}
.imgess .big img{
width: 1000px;
height: 900px;
position: absolute;
}
</style>
<body>
<div class="bkk">
<div class="imgess">
<div class="zz"></div>
<img src="image.html\888.jpg" alt=""> <div class="big"><img src="image.html\888.jpg" alt=""></div>
</div>
</div>
</div>
<script>
var imgess=document.querySelector('.imgess');
var zz=document.querySelector('.zz');
var big=document.querySelector('.big');
var bigm=document.querySelector('.big').querySelector('img');
imgess.addEventListener('mouseover',function(){
zz.style.display='block';
big.style.display='block';
})
imgess.addEventListener('mouseout',function(){
big.style.display='none';
zz.style.display='none';
})
imgess.addEventListener('mousemove',function(e){
var x=e.pageX - this.offsetLeft;
var y=e.pageY - this.offsetTop;
var zzx = x - zz.offsetWidth/2 ;
var zzy = y - zz.offsetHeight/2 ;
var smaxx=imgess.offsetWidth-zz.offsetWidth;
var smaxy=imgess.offsetHeight-zz.offsetHeight;
if( zzx <=0) zzx=0;
if( zzx >=smaxx) zzx= smaxx;
if( zzy <=0) zzy=0;
if(zzy >=smaxy) zzy= smaxy;
zz.style.left= zzx + 'px';
zz.style.top=zzy + 'px';
var bmaxx=big.offsetWidth-bigm.offsetWidth;
var bamxy=big.offsetHeight-bigm.offsetHeight;
var bigx=zzx*smaxx/bmaxx;
var bigy=zzy*smaxy/bamxy;
bigm.style.left= bigx + 'px';
bigm.style.top= bigy + 'px';
})
</script>
</body>
</html>