HTML5全屏橫向時間軸滑塊代碼
最近我在做一個網站項目，需要展示一些時間序列的數據。為了更好的展示數據，我就想到了用一個全屏橫向時間軸滑塊來優化界面。下面是我實現的HTML5代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全屏橫向時間軸滑塊</title>
<style>
* {
margin: 0;
padding: 0;
}
#slider {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 10px;
border-radius: 5px;
background-color: #ddd;
}
#slider .progress {
position: absolute;
width: 50%;
height: 10px;
border-radius: 5px;
background-color: #007bff;
}
#slider .thumb {
position: absolute;
top: -5px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #007bff;
cursor: pointer;
}
</style>
</head>
<body>
<div id="slider">
<div class="progress"></div>
<div class="thumb"></div>
</div>
<script>
var slider = document.getElementById('slider');
var thumb = slider.querySelector('.thumb');
var progress = slider.querySelector('.progress');
var isDragging = false;
function adjustProgress(e) {
if (isDragging) {
var pos = e.pageX - slider.offsetLeft;
var percent = pos / slider.offsetWidth;
if (percent < 0) {
percent = 0;
}
if (percent > 1) {
percent = 1;
}
thumb.style.left = percent * 100 + '%';
progress.style.width = percent * 100 + '%';
}
}
thumb.addEventListener('mousedown', function() {
isDragging = true;
});
document.addEventListener('mousemove', adjustProgress);
document.addEventListener('mouseup', function() {
isDragging = false;
});
</script>
</body>
</html>這段代碼主要實現了以下功能:
- 在頁面中添加一個元素嵌套兩個子元素，一個用來表示進度，一個用來表示拖動按鈕。
- 使用CSS設置滑塊的位置、大小和顏色，使其看起來美觀。
- 使用JavaScript實現了鼠標拖動調整滑塊進度的功能。
希望這個代碼能對大家有所幫助！
上一篇html5全景源代碼
下一篇html5全選功能代碼