使用html css Javascript写一个滑块
时间: 2023-09-07 11:12:54 浏览: 52
好的,以下是一个使用HTML、CSS和JavaScript创建的基本滑块示例:
HTML代码:
```html
<div class="slider">
<div class="slider-track"></div>
<div class="slider-thumb"></div>
</div>
```
CSS代码:
```css
.slider {
position: relative;
height: 10px;
width: 200px;
background-color: #e5e5e5;
border-radius: 5px;
}
.slider-track {
position: absolute;
height: 100%;
width: 0%;
background-color: #007aff;
border-radius: 5px;
}
.slider-thumb {
position: absolute;
height: 20px;
width: 20px;
background-color: #007aff;
border-radius: 50%;
top: -5px;
left: 0;
cursor: pointer;
}
```
JavaScript代码:
```javascript
const slider = document.querySelector('.slider');
const track = slider.querySelector('.slider-track');
const thumb = slider.querySelector('.slider-thumb');
thumb.addEventListener('mousedown', function(event) {
event.preventDefault();
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
});
function onMouseMove(event) {
const sliderWidth = slider.offsetWidth;
const thumbWidth = thumb.offsetWidth;
const thumbPosition = event.pageX - slider.offsetLeft - thumbWidth / 2;
const thumbPositionPercentage = thumbPosition / (sliderWidth - thumbWidth) * 100;
if (thumbPositionPercentage < 0) {
thumbPositionPercentage = 0;
}
if (thumbPositionPercentage > 100) {
thumbPositionPercentage = 100;
}
track.style.width = `${thumbPositionPercentage}%`;
thumb.style.left = `${thumbPositionPercentage}%`;
}
function onMouseUp() {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
}
```
这个滑块的基本原理是:当用户按下并拖动滑块时,通过计算滑块的位置百分比来调整滑块轨道的宽度和滑块本身的位置。