css拖动条怎么做 |css div 布局实例

首先，在HTML中创建一个带有滑块的div。通过CSS将其样式设置为纵向的，然后给它一个宽度和高度。

.slider {
width: 5px;
height: 100px;
background: gray;
position: relative;
}
.slider-thumb {
width: 100%;
height: 20px;
background: white;
position: absolute;
top: 0;
left: 0;
}

接下来，大家需要添加一些JavaScript代码，以便当拖动滑块时，能够实时更新滑块的位置。大家可以使用mousedown、mousemove和mouseup来实现这个功能。当按下鼠标时，大家需要记录下鼠标的位置，然后将滑块的位置更新到鼠标的位置上。当鼠标移动时，大家需要不断更新滑块的位置，而当鼠标松开时，大家需要停止更新滑块的位置。

const slider = document.querySelector('.slider');
const thumb = slider.querySelector('.slider-thumb');
let isDragging = false;
slider.addEventListener('mousedown', (event) =>{
isDragging = true;
document.body.style.cursor = 'grabbing';
});
document.addEventListener('mousemove', (event) =>{
if (!isDragging) {
return;
}
const sliderRect = slider.getBoundingClientRect();
const offsetY = event.clientY - sliderRect.top;
const percentage = (offsetY / sliderRect.height) * 100;
thumb.style.top = `${percentage}%`;
});
document.addEventListener('mouseup', () =>{
isDragging = false;
document.body.style.cursor = 'auto';
});

最后，大家还可以通过CSS来美化滑块的样式，比如给它一个渐变背景、添加阴影等等。

.slider {
width: 5px;
height: 100px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
position: relative;
border-radius: 2.5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.slider-thumb {
width: 100%;
height: 20px;
background: white;
position: absolute;
top: 0;
left: 0;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(0, 0, 0, 0.2);
border-radius: 10px;
cursor: grab;
}

到这里，一个基本的CSS拖动条就完成了。通过不断优化和改进，大家还可以为其添加更多有趣的功能。