JS：点小图变大图的实现

马黑黑 · 发表于 2022-6-29 23:28

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-6-29 23:31 编辑

我们可以在一个div里布置若干个小图，但实际上这些小图并不小，我们设置它小的尺寸而已。比如有一个div：

.papa { width: 1024px; height: fit-content; padding: 10px; }

我们计划小图置于左边，垂直排列，这样，我们需要一个 .leftbox 选择器以装载小图：

.leftbox { width: 120px; }

位于此选择器的图片都固定大小（以及其他属性）：

.leftbox img { width: 100px; height: 100px; border-radius: 50%; opacity: .35; }

为了交互，我们再给小图片设置一个伪类选择器 hover，鼠标滑过时产生一些动态效果：

.leftbox img:hover { box-shadow: 0 4px 20px #000; opacity: 1; cursor: pointer; }

这是 CSS 部分，我们把代码集中起来（含完善代码）：

<style>
.papa { width: 1024px; height: fit-content; padding: 10px; position: relative; }
.leftbox { width: 120px; position: relative;}
.leftbox img { width: 100px; height: 100px; border-radius: 50%; opacity: .35; }
.leftbox img:hover { box-shadow: 0 4px 20px #000; opacity: 1; cursor: pointer; }
</style>

然后组织一下 HTML 结构：

<div class="papa">
<div class="leftbox">
      <img class="ss" src="图一" alt="" />
      <img class="ss" src="图二" alt="" />
</div>
</div>

小图统一使用 class 名称 ss，方便 JS 处理：

<script>

let papa = document.querySelector('.papa'), //父框句柄
      ss = document.querySelectorAll('.ss'); //小图片句柄

//遍历小图片数组
ss.forEach((ele) => {
      ele.onclick = () => { //图片单击事件：将被单击的小图片的url赋值给 papa 做背景图
            papa.style.background = 'url(' + ele.src + ') no-repeat center / cover';
      }
});

</script>

读到这，应该知道实现思路了：大图的呈现方式其实是通过给父框加载背景图片完成的。当然我们也可以用其他方式，例如，在 leftbox 的右边设置一个大尺寸的 img 元素，小图片单击时将小图片的url赋值给大 img 选择器。