其他
实战:使用CSS和JS创建“前后”图像比较效果
介绍
结果演示
逐步指南
步骤1.了解概念
range input
元素。它允许用户在你定义的最小值和最大值之间通过拖动来选择一个值。使用javascript中的事件监听器可以很容易地获取输入值。<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
使用默认slider输入的一个缺点是,样式是有限的。你不能在设计上太过疯狂,如果你正在寻找一个更可定制的slider,你可能需要自己构建它。然而,这不是本教程的重点。
步骤2.创建图像容器
background-image
而不是 <img>
标签。我们需要使用的一种重要样式是 background-size
属性,并确保图像始终保持相同大小。<div class='container'>
<div class='img background-img'></div>
<div class='img foreground-img'></div>
</div>
CSS:
.container {
position: relative;
width: 900px;
height: 600px;
border: 2px solid white;
}
.img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 900px 100%;
}
.background-img {
background-image: url('https://i.loli.net/2020/12/28/1dGpFx3zJ9Pjcme.jpg');
}
.foreground-img {
background-image: url('https://i.loli.net/2020/12/28/xIZmjtBR5VWoqiz.jpg');
width: 50%;
}
为了使本教程更容易些,我对所有内容都使用了固定大小。如果你不想使用SCSS,只需将样式设置为扁平而不是嵌套
步骤3.创建滑块
<div class='container'>
...
<input type="range" min="1" max="100" value="50" class="slider" name='slider' id="slider">
</div>
.container {
position: relative;
width: 900px;
height: 600px;
border: 2px solid white;
}
.img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 900px 100%;
}
.background-img {
background-image: url('https://i.loli.net/2020/12/28/1dGpFx3zJ9Pjcme.jpg');
}
.foreground-img {
background-image: url('https://i.loli.net/2020/12/28/xIZmjtBR5VWoqiz.jpg');
width: 50%;
}
.slider {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 100%;
background: rgba(242,242,241,.3);
outline: none;
margin: 0;
transition: all .2s;
}
.slider:hover {
background: rgba(242,242,241,.1);
}
.slider::-webkit-slider-thumb{
-webkit-appearance: none;
appearance: none;
width: 6px;
height: 600px;
background: white;
cursor: pointer;
}
步骤4.将事件侦听器添加到滑块
range
input作为滑块)。应用事件侦听器时,可以在 event.target.value
中获得 1–100
的值。const slider = document.getElementById("slider");
slider.addEventListener("input", function(e){
document.querySelector(".foreground-img").style.width = e.target.value + "%"
})
如果它没有按预期工作,请尝试查看你是否正确获取了slider的值,然后再次检查CSS的 background-size 属性
range
输入的额外好处是我们甚至可以在容器内单击,使滑块移动到被单击的位置。步骤5(可选)在滑块上添加圆圈拇指
range
输入有它的优势(容易实现,容易取值等),但在样式上我们可以做的不多。由于我们用白色分隔线代替了默认的 “圆圈”拇指,所以我们需要用某种方式把圆圈加回来。<div class='container'>
...
<div class='slider-button'></div>
</div>
CSS:
.slider-button {
pointer-events: none;
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: white;
left: calc(50% - 18px);
top: calc(50% - 18px);
display: flex;
justify-content: center;
align-items: center;
}
.slider-button::after {
content: '';
padding: 3px;
display: inline-block;
border: solid #5D5D5D;
border-width: 0 2px 2px 0;
transform: rotate(-45deg);
}
.slider-button::before {
content: '';
padding: 3px;
display: inline-block;
border: solid #5D5D5D;
border-width: 0 2px 2px 0;
transform: rotate(135deg);
}
after和before元素在圆圈按钮内添加两个“箭头”
JS:
const slider = document.getElementById("slider");
let sliderPos
slider.addEventListener("input", function(e){
sliderPos = e.target.value
document.querySelector(".foreground-img").style.width = `${sliderPos}%`
document.querySelector(".slider-button").style.left = `calc(${sliderPos}% - 18px)`
})
源码
总结
更多精彩利
粉丝福利
临走前留下,今天的福利
福利1:《MongoDB 4.0从入门到达人》获取资源请在公众号对话框中回复关键字:043,如果没有关注请扫下面的二维码。更多福利资料请查看公众号菜单 福利2:在看+留言,我随机抽取一位认真留言的小伙伴,给他发一个红包奖励
最近文章
- END -
点赞 + 在看 + 留言,下一个幸运儿就是你!
走心的分享更容易被抽中~
开奖时间 下期文末