1.代码效果
鼠标悬停在那里,即放大鼠标周围的一部分图片
2.代码及解释
原理:将原本的大图隐藏,显示其按倍数缩小的图片,当鼠标停在某一部分计算x、y的大小来显示隐藏的大图的对应位置。
<!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.5.0.min.js"></script>
<style>
*{margin: 0px;padding: 0px;}
.hid{
width: 200px;
height: 200px;
overflow: hidden;
display: none;
position: absolute;
}
</style>
</head>