css+jquery步骤进度条

来源：互联网发布：淘宝试用黑名单恢复编辑：程序博客网时间：2024/05/29 16:19
<!doctype html><html><head><meta charset="utf-8"><title>progressbar</title><style>.progress-wrap {margin-top: 200px;padding: 0px;width: 100%;height: 100px;}.progress-wrap li {margin-top: 30px;list-style: none;float: left;width: 300px;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></body></html><script type="text/javascript" src="https://staging.quncrm.com/build/jquery.min.js"></script><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>
0 0