效果
方法
1.添加css样式
<style>
/* 初始状态 */
.enlarge {
transition: all 0.2s ease-out;
}
/* 显示原图 */
.enlarge.fullsize {
width: auto;
height: auto;
}
</style>这段 CSS 代码定义了一个名为 enlarge 的类，其中包含一个过渡效果的属性 transition ，该属性指定更改图像大小的过渡时间（0.2秒）和缓动函数（ease-out）。
另外，它还定义了一种新的类 .enlarge.fullsize ，用于在单击图像时将其扩大到其原始尺寸（使用 width:auto;height:auto ），以便让用户查看更大的图像。
也就是说, 比如网页中图片的初始状态大小定为设置为其他值, 在 .enlarge.fullsize 状态下则采用原图大小。
2.添加js
<script>
function toggleFullSize(img) {
if (img.classList.contains('fullsize')) {
img.classList.remove('fullsize');
} else {
img.classList.add('fullsize');
}
}
</script>这段 JavaScript 代码定义了一个名为 toggleFullSize 的函数，以处理图像的大小变化。该函数接收一个参数 img，它表示调用函数时被单击的图片元素。函数使用 classList 属性来检查这个图片是否已经被放大（即它是否带有 fullsize 类）。
如果是，则将 fullsize 类从类列表中删除，从而使图片回到其初始大小。否则，它会将 fullsize 类添加到类列表中，以便将图片放大到其原始尺寸。
因此，这段代码允许用户通过单击图像在其原始尺寸和初始缩放尺寸之间进行切换。
3.添加图片
<img src="./images/1.png" width="20%" class="enlarge" onclick="toggleFullSize(this)">通过代码引入图像，并将其大小设置为一个尺寸。
图片使用 enlarge 类应用了一个过渡效果，使用 onclick 属性添加了一个 JavaScript 事件监听器。
当用户单击此图像时，它会调用名为 toggleFullSize 的 JavaScript 函数，并传递当前图像元素（即 this 关键字）。这个函数的作用是在全尺寸和初始大小之间切换图像大小，从而让用户能够看到更清晰的图片。
最后
这是最近在网上看到的，有时候对一个简单的网站来说，阅读体验往往是比较重要的，类似引入fannbox等程序往往会在弹窗时导致缺乏阅读体验，这是一个比较不错的方案。
完整代码
<!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>欢迎访问YYDNAS</title>
<style>
/* 初始状态 */
.enlarge {
transition: all 0.2s ease-out;
}
/* 显示原图 */
.enlarge.fullsize {
width: auto;
height: auto;
}
</style>
</head>
<body>
<img src="./images/1.png" width="20%" class="enlarge" onclick="toggleFullSize(this)">
<img src="./images/1.png" width="20%" class="enlarge" onclick="toggleFullSize(this)">
<script>
function toggleFullSize(img) {
if (img.classList.contains('fullsize')) {
img.classList.remove('fullsize');
} else {
img.classList.add('fullsize');
}
}
</script>
</body>
</html>