<分区>
我正在努力为网站实现自定义进度条。这是它应该具有的形状:
当用户选择一个圆圈时，我希望线条(只有线条，而不是圆圈)填充不同的颜色，直到它到达那个圆圈，最后那个红点应该出现在中间，作为如果用户单击第三个圆圈，则最终结果:
我不知道最好、更简单的方法是什么。我在网上尝试了一些纯 CSS、jQuery 和 JavaScript 解决方案，但没有一个可以重现这种效果。我应该有两个图像并逐渐叠加它们直到我只到达点击的点吗？我是否应该完全忘记图像并尝试使用 CSS 或 SVG 重新创建形状并更改特定部分的颜色？
我知道这里的问题通常都有代码，但我无法展示任何代码，因为我不知道要采用什么方法，而且在线研究的时间导致了无数不适用于我的案例的解决方案。
提前致谢。
最佳答案
结合使用 CSS 和一点 jQuery 就相当简单。
// Add click handler to the original dots
$("UL.progress LI").click(function(e) {
// Deselect current selection
$("UL.progress LI.selected").removeClass("selected");
var newDot = $(this);
// Which dot are we selecting?
var newProgressWidth = newDot.index();
// Animate the new width of the red line
$("UL.progress LI.progressline").animate(
{'width': (newProgressWidth * 90) + 'px'},
400,
function() {
// When done, select the new dot
newDot.addClass("selected");
});
});
// Add the black and red bars as additional <li> elements
// without click handlers
$("<li>").addClass("blackbar").appendTo("UL.progress");
$("<li>").addClass("progressline").appendTo("UL.progress");
// Select the first dot
$("UL.progress LI").first().addClass("selected");UL.progress {
list-style: none;
padding: 0;
position: relative;
}
/* the black dots */
UL.progress LI {
float: left;
width: 60px;
height: 60px;
background-color: black;
border-radius: 50%;
margin-left: 30px;
position: relative;
cursor: pointer;
}
/* first black dot has no gap to the left */
UL.progress LI:first-child {
margin-left: 0;
}
/* red dot when selected */
UL.progress LI.selected:after {
content: '';
display: block;
position: absolute;
top: 15px;
left: 15px;
width: 30px;
height: 30px;
background-color: red;
border-radius: 50%;
}
/* the black and red lines at the back*/
UL.progress LI.blackbar,
UL.progress LI.progressline {
z-index: -2;
content: '';
display: block;
position: absolute;
top: 28px;
left: 30px; /* 60 (diameter) / 2 */
width: 450px; /* 5*60 + 5*30 (dot diameter and gap) */
height: 4px;
background-color: black;
margin-left: 0;
border-radius: 0;
}
/* the black line */
UL.progress LI.blackbar {
z-index: -2;
background-color: black;
}
/* the red progress line */
UL.progress LI.progressline {
z-index: -1;
background-color: red;
width: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Example progress bar<br/>
<ul class="progress">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul> 关于javascript - 自定义形状进度条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27051337/