<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Css步骤进度条-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
.progress-wrap {
margin-top:50px;
padding:0px;
width:100%;
height:100px;
}
.progress-wrap li {
margin-top:30px;
list-style:none;
float:left;
width:150px;
height:30px;
position:relative;
}
.progress-wrap .progress-line {
background-color:#b9b9b9;
position:absolute;
height:8px;
width:100%;
top:13px;
margin-left:2px;
transition:background-color 2s linear;
-moz-transition:background-color 2s linear;
-webkit-transition:background-color 2s linear;
-o-transition:background-color 2s linear;
}
.progress-wrap .progress-content {
position:absolute;
text-align:center;
}
.progress-wrap .progress-content .progress-number {
display:inline-block;
*zoom:1;
position:absolute;
width:30px;
height:30px;
line-height:30px;
color:#fff;
border-radius:50%;
border:2px solid rgba(224,224,224,1);
font-family:tahoma;
font-weight:bold;
font-size:16px;
background-color:#b9b9b9;
box-shadow:1px 1px 2px rgba(0,0,0,.2) inset;
cursor:pointer;
}
.progress-wrap .progress-content .progress-text {
position:absolute;
font-size:12px;
width:30px;
top:42px;
color:#b9b9b9;
}
</style>
</head>
<body>
<div style="width:80%; margin:0 auto;">
<ol class="progress-wrap">
<li class="progress-one">
<div class="progress-line"></div>
<div class="progress-content">
<span class="progress-number" id="start">1</span>
<span class="progress-text">步骤1</span>
</div>
</li>
<li class="progress-two">
<div class="progress-line"></div>
<div class="progress-content">
<span class="progress-number" id="second">2</span>
<span class="progress-text">步骤2</span>
</div>
</li>
<li class="progress-three">
<div class="progress-line"></div>
<div class="progress-content">
<span class="progress-number" id="third">3</span>
<span class="progress-text">步骤3</span>
</div>
</li>
<li class="progress-four">
<div class="progress-content">
<span class="progress-number" id="end">4</span>
<span class="progress-text">步骤4</span>
</div>
</li>
</ol>
</div>
<script>
$(function() {
var currentColor = '#3c3';
var unfinishedColor = '#b9b9b9';
var finishedColor = '#85e085';
$('#start').click(function() {
$(this)
.css('background-color', currentColor)
.next('span').css('color', currentColor)
.parent('div').prev('div.progress-line').css('background-color', unfinishedColor)
$('#second')
.css('background-color', unfinishedColor)
.next('span').css('color', unfinishedColor)
.parent('div').prev('div.progress-line').css('background-color', unfinishedColor)
$('#third')
.css('background-color', unfinishedColor)
.next('span').css('color', unfinishedColor)
.parent('div').prev('div.progress-line').css('background-color', unfinishedColor)
$('#end')
.css('background-color', unfinishedColor)
.next('span').css('color', unfinishedColor)
})
$('#second').click(function() {
$(this)
.css('background-color', currentColor)
.next('span').css('color', currentColor)
.parent('div').prev('div.progress-line').css('background-color', unfinishedColor)
$('#start')
.css('background-color', finishedColor)
.next('span').css('color', finishedColor)
.parent('div').prev('div.progress-line').css('background-color', currentColor)
$('#third')
.css('background-color', unfinishedColor)
.next('span').css('color', unfinishedColor)
.parent('div').prev('div.progress-line').css('background-color', unfinishedColor)
$('#end')
.css('background-color', unfinishedColor)
.next('span').css('color', unfinishedColor)
})
$('#third').click(function() {
$(this)
.css('background-color', currentColor)
.next('span').css('color', currentColor)
.parent('div').prev('div.progress-line').css('background-color', unfinishedColor)
$('#start')
.css('background-color', finishedColor)
.next('span').css('color', finishedColor)
.parent('div').prev('div.progress-line').css('background-color', finishedColor)
$('#second')
.css('background-color', finishedColor)
.next('span').css('color', finishedColor)
.parent('div').prev('div.progress-line').css('background-color', currentColor)
$('#end')
.css('background-color', unfinishedColor)
.next('span').css('color', unfinishedColor)
})
$('#end').click(function() {
$(this)
.css('background-color', currentColor)
.next('span').css('color', currentColor)
$('#start')
.css('background-color', finishedColor)
.next('span').css('color', finishedColor)
.parent('div').prev('div.progress-line').css('background-color', finishedColor)
$('#second')
.css('background-color', finishedColor)
.next('span').css('color', finishedColor)
.parent('div').prev('div.progress-line').css('background-color', finishedColor)
$('#third')
.css('background-color', finishedColor)
.next('span').css('color', finishedColor)
.parent('div').prev('div.progress-line').css('background-color', currentColor)
})
})
</script>
</body>
</html>
这个是我写的一个小demo,页面处于移动端的时候,可以左右滑动.滚动条是一个伪元素,滚动条整体部分webkit-scrollbar 都设置为0,就看不到它的样式了, 在父级盒子设置 overflow: hidden; 子级盒子设置 overflow-x:auto;
white-space: nowrap;这两个属性实现了滚动效果. 当然li标签得设置的行内块级元素display:inline-block;