这是我参与11月更文挑战的第16天，活动详情查看：2021最后一次更文挑战。
超级喜欢学校老校区的这几张图片，疯狂用这些图片最特效，今天分享的是一个图片放大特效，具体思路见下文：
一、HTML布局
实现设计好相关需要的区域，html布局如下：
1、图片放大区域
2、图片选择区域
布局核心html代码如下：
<div class="zoomin">
<div class="big">
<img src="imgs/1.jpg" alt="" id="big">
</div>
<div class="small">
<img src="imgs/1.jpg" class="small_img">
<img src="imgs/2.jpg" class="small_img">
<img src="imgs/3.jpg" class="small_img">
<img src="imgs/4.jpg" class="small_img">
</div>
</div>
二、CSS样式
因为主要是为了练习一下javascript的代码，html布局的样式信息怎么方便怎么来，这里我通过设置图片标签的宽度和高度的等比例缩放来实现图片的放大与缩小。
样式如下：
加完样式信息后的布局如下图：
三、Javascript特效
1、获取图片放大区域和图片选择区域的标签对象
2、设置初始化图片选择区域的默认样式
3、为图片选择区域的标签对象设置鼠标点击响应事件
（1）循环图片选择区域的标签对象设置响应事件
（2）点击某个标签对象的响应事件时，将图片放大区域标签对象的src的图片链接与当前选择的标签对象一致
（3）为当前选择的标签对象设置默认边框样式
for (let i = 0; i < small.length; i++) {
small[i].index = i;
small[i].addEventListener('click', function() {
big.src = small[this.index].src;
for (let j = 0; j < small.length; j++) {
small[j].style.border = "";
console.log(small[j].style.border);
}
small[this.index].style.border = "gray 2px solid";
})
}
优化：阔以在图片放大时，设置一个切换过渡的特效，会更好看，感兴趣可以尝试尝试。
