<!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>
<script src="jquery-3.6.0.js"></script>
<style>
.box{
width: 300px;
height: 200px;
border: 1px solid #ccc;
position: relative;
}
.big{
width: 600px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.mask{
width: 150px;
height: 100px;
background:rgba(red, green, blue, alpha);
position:absolute;
top:0;
left: 0;
cursor: move;
display: none;
}
.small{position: relative;}
.box img{vertical-align: top;}
#bogBox img{position: absolute;}
.down{padding: 20px;}
.down img{
width: 60px;
height: 40px;
border: 3px solid #ccc;
}
</style>
</head>
<body>
<div class="box" id="box">
<div id="smallBox" class="small">
<img src="images/1.jpg" upimg>
<div id="mask" class="mask"></div>
</div>
<div class="down">
<img src="images/1.jpg" rel='images/2.jpg' smallimage>
<img src="images/3.jpg" rel='images/4.jpg' smallimage>
<img src="images/xiyangyang.jpeg" rel='images/kuzi.jpg' smallimage>
</div>
<div id="bigBox" class="big">
<img id="bigImg" src="images/2.jpg">
</div>
</div>
</body>
<script>
$("[smallimage]").mouseover(function(){
var address=$(this).css("border","3px solid red").attr("src");
$("[upimg]").attr("src",address);
var bigImage=$(this).attr("rel");
$("#bigImg").attr("src",bigImage);
}).mouseover(function(){
$(this).css("border","3px solid #ccc");
});
$('#smallBox').mouseover(function(){
$('#mask').css("display","block");
$('#bigBox').css("display","block");
});
$('#smallBox').mouseover(function(event){
var event=event || window.event;
var pageX=event.pageX
var pageY=event.pageY
var boxX=pageX-$('#box').offset().left;
var boxY=pageY-$('#box').offset().top;
var maskX=boxX-$('#mask').outerWidth()/2;
var maskY=boxY-$('#mask').outerHeight()/2;
if(maskX<0){
maskX=0;
}
if(maskX>$('#smallBox').outerWidth-$('#mask').outerWidth()){
maskX=$('#smallBox').outerWidth-$('#mask').outerWidth();
}
if(maskY<0){
maskY=0;
}
if(maskY>$('#smallBox').outerWidth-$('#mask').outerHeight()){
maskY=$('#smallBox').outerWidth-$('#mask').outerHeight();
}
$('#mask').css("left",maskX+'px');
$('#mask').css("top",maskY+'px');
})
var multiple=4;
$('#bigImg').css("left",-multiple*maskX+'px');
$('#bigImg').css("left",-multiple*maskY+'px');
</script>
</html>
