<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery拖动滑块选择百分比特效</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
font-family: 'Arial', sans-serif;
color: #333;
}
.slider-container {
width: 80%;
max-width: 500px;
padding: 30px;
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
text-align: center;
}
h2 {
margin-bottom: 30px;
color: #4a6baf;
}
.slider-wrapper {
position: relative;
margin: 40px 0;
}
.slider-track {
width: 100%;
height: 8px;
background: #e0e0e0;
border-radius: 4px;
position: relative;
}
.slider-progress {
position: absolute;
height: 100%;
background: linear-gradient(to right, #4facfe, #00f2fe);
border-radius: 4px;
width: 0%;
}
.slider-thumb {
position: absolute;
width: 24px;
height: 24px;
background: white;
border-radius: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
cursor: pointer;
z-index: 2;
border: 3px solid #4facfe;
transition: all 0.2s ease;
}
.slider-thumb:hover {
transform: translate(-50%, -50%) scale(1.1);
}
.slider-thumb.active {
transform: translate(-50%, -50%) scale(1.1);
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3);
}
.slider-ticks {
display: flex;
justify-content: space-between;
margin-top: 15px;
position: relative;
}
.tick {
width: 1px;
height: 10px;
background: #ccc;
position: relative;
}
.tick-label {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
color: #777;
}
.value-display {
margin-top: 30px;
font-size: 24px;
font-weight: bold;
color: #4a6baf;
}
.percentage-circle {
width: 120px;
height: 120px;
margin: 0 auto;
position: relative;
border-radius: 50%;
background: #f5f7fa;
display: flex;
justify-content: center;
align-items: center;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}
.percentage-circle-inner {
width: 100px;
height: 100px;
background: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 28px;
font-weight: bold;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* 插入的链接样式 */
.inserted-link {
position: absolute;
top: 20px;
right: 20px;
color: #4facfe;
text-decoration: none;
font-size: 14px;
padding: 8px 15px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
z-index: 100;
}
.inserted-link:hover {
background: #4facfe;
color: white;
transform: translateY(-2px);
}
@media (max-width: 600px) {
.slider-container {
width: 90%;
padding: 20px;
}
.percentage-circle {
width: 100px;
height: 100px;
}
.percentage-circle-inner {
width: 80px;
height: 80px;
font-size: 22px;
}
}
</style>
</head>
<body>
<div class="slider-container">
<h2>拖动滑块选择百分比</h2>
<div class="percentage-circle">
<div class="percentage-circle-inner">
<span id="percentage-value">50%</span>
</div>
</div>
<div class="value-display" id="value-display">当前值: 50%</div>
<div class="slider-wrapper">
<div class="slider-track">
<div class="slider-progress" id="slider-progress"></div>
<div class="slider-thumb" id="slider-thumb"></div>
</div>
<div class="slider-ticks">
<div class="tick"><span class="tick-label">0%</span></div>
<div class="tick"><span class="tick-label">25%</span></div>
<div class="tick"><span class="tick-label">50%</span></div>
<div class="tick"><span class="tick-label">75%</span></div>
<div class="tick"><span class="tick-label">100%</span></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
const $thumb = $('#slider-thumb');
const $track = $('.slider-track');
const $progress = $('#slider-progress');
const $percentageValue = $('#percentage-value');
const $valueDisplay = $('#value-display');
let isDragging = false;
let currentValue = 50;
// 初始化滑块位置
updateSlider(currentValue);
// 鼠标按下事件
$thumb.on('mousedown touchstart', function(e) {
isDragging = true;
$thumb.addClass('active');
e.preventDefault();
handleMove(e);
});
// 鼠标移动事件
$(document).on('mousemove touchmove', function(e) {
if (isDragging) {
handleMove(e);
}
});
// 鼠标释放事件
$(document).on('mouseup touchend', function() {
if (isDragging) {
isDragging = false;
$thumb.removeClass('active');
}
});
// 点击轨道直接跳转
$track.on('click', function(e) {
const trackWidth = $track.width();
const trackOffset = $track.offset().left;
const clickX = e.pageX - trackOffset;
let newValue = Math.round((clickX / trackWidth) * 100);
newValue = Math.max(0, Math.min(100, newValue));
updateSlider(newValue);
});
// 处理移动
function handleMove(e) {
const trackWidth = $track.width();
const trackOffset = $track.offset().left;
let clientX = e.type === 'touchmove' ? e.originalEvent.touches[0].clientX : e.clientX;
let newX = clientX - trackOffset;
newX = Math.max(0, Math.min(trackWidth, newX));
let newValue = Math.round((newX / trackWidth) * 100);
updateSlider(newValue);
}
// 更新滑块位置和值
function updateSlider(value) {
currentValue = value;
const percentage = value + '%';
const trackWidth = $track.width();
const thumbPosition = (trackWidth * value) / 100;
$thumb.css('left', thumbPosition);
$progress.css('width', percentage);
$percentageValue.text(percentage);
$valueDisplay.text('当前值: ' + percentage);
// 更新圆形进度条颜色
const hue = (120 * value) / 100; // 从绿色(120)到红色(0)
$('.percentage-circle-inner').css('color', `hsl(${120 - hue}, 80%, 50%)`);
}
});
</script>
</body>
</html>
扫一扫
612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
