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

JS：点小图变大图的实现

本帖最后由 马黑黑 于 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 选择器。

红影 发表于 2022-6-30 13:50

这个不需要设置高的么？高度是图片自动撑开的？

红影 发表于 2022-6-30 14:21

看到了 ,height: fit-content;{:4_204:}

马黑黑 发表于 2022-6-30 18:27

红影 发表于 2022-6-30 14:21
看到了 ,height: fit-content;

嗯，这是关键

马黑黑 发表于 2022-6-30 18:28

红影 发表于 2022-6-30 13:50
这个不需要设置高的么？高度是图片自动撑开的？

可以不设置，设置也可以

红影 发表于 2022-6-30 22:08

马黑黑 发表于 2022-6-30 18:27
嗯，这是关键

明白了{:4_187:}

红影 发表于 2022-6-30 22:09

马黑黑 发表于 2022-6-30 18:28
可以不设置，设置也可以

还是不设置的好，否则还得去计算那个空间{:4_173:}

马黑黑 发表于 2022-6-30 22:24

红影 发表于 2022-6-30 22:09
还是不设置的好，否则还得去计算那个空间

flex布局，横向排列的话，可以不用考虑父元素高度，除非需要

马黑黑 发表于 2022-6-30 22:27

红影 发表于 2022-6-30 22:08
明白了

这样就不用计算到底有多宽。省力。

红影 发表于 2022-7-1 15:46

马黑黑 发表于 2022-6-30 22:24
flex布局，横向排列的话，可以不用考虑父元素高度，除非需要

看你前面做的好像是竖向排列啊。

红影 发表于 2022-7-1 15:47

马黑黑 发表于 2022-6-30 22:27
这样就不用计算到底有多宽。省力。

嗯，让机器自己去调配，更准确呢。

马黑黑 发表于 2022-7-1 18:12

红影 发表于 2022-7-1 15:47
嗯，让机器自己去调配，更准确呢。

反正省力省心

马黑黑 发表于 2022-7-1 18:13

红影 发表于 2022-7-1 15:46
看你前面做的好像是竖向排列啊。

都可以，但前面那个不是flex布局，利用宽度强行将图片往下挤

红影 发表于 2022-7-1 21:43

马黑黑 发表于 2022-7-1 18:12
反正省力省心

还不容易出错{:4_173:}

马黑黑 发表于 2022-7-1 21:43

红影 发表于 2022-7-1 21:43
还不容易出错

最好的

红影 发表于 2022-7-1 21:51

马黑黑 发表于 2022-7-1 18:13
都可以，但前面那个不是flex布局，利用宽度强行将图片往下挤

这个还挺方便，能把图图自动排布到统一的尺寸上。

马黑黑 发表于 2022-7-1 21:52

红影 发表于 2022-7-1 21:51
这个还挺方便，能把图图自动排布到统一的尺寸上。

方法很多，这只是其中之一

红影 发表于 2022-7-2 21:23

马黑黑 发表于 2022-7-1 21:52
方法很多，这只是其中之一

反正我都不知道，黑黑教什么，我就跟着学什么{:4_173:}

马黑黑 发表于 2022-7-2 21:29

红影 发表于 2022-7-2 21:23
反正我都不知道，黑黑教什么，我就跟着学什么

我一般会介绍比较简洁点的

红影 发表于 2022-7-2 22:28

马黑黑 发表于 2022-7-2 21:29
我一般会介绍比较简洁点的

所以跟在你后面学习更容易懂{:4_204:}
页: [1] 2
查看完整版本: JS：点小图变大图的实现