|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
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 选择器。
|
评分
-
| 参与人数 2 | 威望 +80 |
金钱 +160 |
经验 +80 |
收起
理由
|
加林森
| + 30 |
+ 60 |
+ 30 |
很给力! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|