两张图像进行比较，则“前后”图像滑块是一个有效而又简单的 UI 元素
使用前后背景图和表单元素“input[type=range]”进行切换 使滑块具有 100％的容器宽度和高度，并将其放置在图像容器的顶部。当用户拖动滑块时，我们同时更新前景的宽度，创建一种用户拖动图像的错觉。
- 前后两张背景图（尺寸大小相同）
- 添加滑块，设置滑块大小和父容器一样大，背景色和透明度
- 清除滑块默认样式（appearence：none）
- 使用div设置样式居中，使用border进行设置边框，再旋转成＞＜，再居中
- input添加监听事件，获取value设置成滑块和圆圈的left值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="./html2canvas.js"></script> -->
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
</head>
<style>
.container {
position: relative;
width: 500px;
height: 300px;
background: #ccc;
margin: 0 auto;
border: 2px solid white;
}
.back,.front {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-size: 500px 100%;
}
.back {
width: 500px;
background-image: url(./kaola.jpg);
}
.front {
width: 50%;
background-image: url(./qie.jpg);
}
input{
/*display: flex;
justify-content: center;
align-items: center;*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:rgba(242,242,241,.2);
/*appearance: none;在chrome浏览器不生效*/
-webkit-appearance: none;
transition: all 0.3s;
outline: none;
margin:0;
}
.slider:hover {
background: rgba(242,242,241,.1);
}
/*去除range默认样式 自定义*/
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
/*清除默认样式*/
appearance: none;
width: 6px;
height: 600px;
background: white;
}
.slider-button {
pointer-events: none;
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: white;
left: calc(50% - 15px);
top: calc(50% - 15px);
/*left:235px;
top:135px;*/
display: flex;
justify-content: center;
align-items: center;
/*父容器设置成弹性盒子，项目元素自动居中对齐*/
}
.slider-button::after {
content: '';
padding: 2px;
display: inline-block;
border: solid #5D5D5D;
border-width: 0 2px 2px 0;
/*画出直角折线，再旋转变成大于符号*/
transform: rotate(-45deg);
}
.slider-button::before {
content: '';
padding: 2px;
display: inline-block;
border: solid #5D5D5D;
border-width: 0 2px 2px 0;
transform: rotate(135deg);
}
</style>
<body>
<div class="container" id="container">
<div class="back"></div>
<div class="front"></div>
<input type="range" min=0 max=100 value=50 class="slider">
<div class="slider-button"></div>
</div>
<script>
let input = document.querySelector("input");
let front = document.querySelector(".front");
let button = document.querySelector(".slider-button");
input.addEventListener("input", (e) => {
// console.log(e.target.value);
// console.log(front);
// console.log(button.style.left);
front.style.width = e.target.value + '%';
button.style.left = `calc(${e.target.value}% - 15px)`;
})
//html截图
html2canvas(document.getElementById("container"), {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
})
</script>
</body>
</html>
