编写一个漂亮的页面,内置两个垂直滑动的滑块,并显示滑块的状态
时间: 2023-11-22 08:55:11 浏览: 38
以下是一个简单的示例页面,其中包含两个垂直滑动的滑块,并在页面中显示它们的状态:
```html
<!DOCTYPE html>
<html>
<head>
<title>滑块示例</title>
<style>
.slider-container {
display: flex;
align-items: center;
justify-content: center;
height: 300px;
}
.slider {
width: 20px;
height: 200px;
background-color: gray;
border-radius: 10px;
margin: 20px;
position: relative;
overflow: hidden;
}
.slider::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: blue;
}
.slider::-webkit-scrollbar {
width: 10px;
}
.slider::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
.slider::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 5px;
}
.slider::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
</style>
</head>
<body>
<div class="slider-container">
<div class="slider" id="slider1" onscroll="updateSlider('slider1')"></div>
<div class="slider" id="slider2" onscroll="updateSlider('slider2')"></div>
</div>
<script>
function updateSlider(sliderId) {
var slider = document.getElementById(sliderId);
var scrollTop = slider.scrollTop;
var scrollHeight = slider.scrollHeight;
var height = slider.clientHeight;
var scrollPercent = (scrollTop / (scrollHeight - height)) * 100;
console.log(sliderId + " 滑块位置:" + scrollPercent.toFixed(2) + "%");
}
</script>
</body>
</html>
```
该页面使用了 flex 布局来将两个滑块垂直居中,并使用了 CSS 样式来创建滑块样式。滑块的状态通过 onscroll 事件处理程序在滑动时更新,并使用 console.log 将状态输出到控制台。在实际应用中,您可以根据需要将状态显示在页面的其他位置。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)