The result of the operation is as follows:
As the mouse moves into the small image, the larger image will appear and move with the mouse.
code show as below:
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
//The small image binds the mouse in, mouse out and mouse move events respectively
$("#small").bind("mouseover mouseout mousemove",function(event){
if(event.type=="mouseover"){
$("#showBig").show();
}else if(event.type=="mouseout"){
$("#showBig").hide();
}else if(event.type=="mousemove"){
//When the mouse moves, it will enter the big picture, and the events bound to the small picture will be
//It doesn't work, so add 10 to the obtained value
$("#showBig").offset({
// Get the coordinates of the mouse
left: event.pageX+10,
top: event.pageY+10
});
}
})
})
</script>
<style type="text/css">
body{text-align: center;}
#small{margin-top: 150px;}
#showBig{
position: absolute;
display: none;
}
</style>
</head>
<body>
<img id="small" src="1.jpg" width="300px">
<div id="showBig">
<img src="1.jpg" width="450px"/>
</div>
</body>
</html>