我看到很多示例进度条,显示进度条已填满。然而,我只是想知道我怎样才能让进步一步步体现出进步。可以看到我想要的一个很好的例子 Here 。任何来自其他页面的有用代码或示例/演示都是很好的。
谢谢!
最佳答案
如果您喜欢 Buffalo,请看看他们是如何做到的。
首先他们定义一个这样的div:
<div id="progress">
<div id="complete" class="s1">
<div id="marker"></div>
</div>
</div>
然后他们使用 CSS 根据进度渲染 div(由 class="s1"等控制)。
/**
* PROGRESS
*/
#progress,#complete {
width: 520px;
margin: 1px 0 19px;
height: 32px;
background:url(/img/backgrounds/progress.png);
position:relative;
}
#complete {
background-position: 0px 57px;
margin-top: 0;
}
#complete #marker {
position: absolute;
top: 0;
right: -26px;
background:url(/img/backgrounds/markers.png);
width: 26px;
height: 32px;
}
#progress .s1 {
width: 19px;
}
#progress .s2 {
width:111px;
}
#progress .s3 {
width:203px;
}
#progress .s4 {
width:295px;
}
#progress .s5 {
width:386px;
}
#progress .s6 {
width:478px;
}
#progress .s2 #marker {
background-position: -26px 0;
}
#progress .s3 #marker {
background-position: -52px 0;
}
#progress .s4 #marker {
background-position: -78px 0;
}
#progress .s5 #marker {
background-position: -104px 0;
}
#progress .s6 #marker {
background-position: -130px 0;
}
CSS 操纵图像以显示所需的状态
关于jquery - 如何制作一个反射(reflect)逐步表单进展的 jquery/css 进度条?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11764317/