css+jquery步驟進度條

阿新 • • 發佈：2019-01-16

<!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>

css+jquery步驟進度條

<!doctype html> <html> <head> <meta charset="utf-8"> <title>progressbar</title> <style> .progre

純css實現頂部進度條隨滾動條滾動

<!DOCTYPE html> <head> 　　<meta charset="utf-8"> 　　<meta http-equiv="X-UA-Compatible" content="IE=edge"> 　　<tit

一個超炫酷帶陰影的CSS/Sass 3D進度條

（點選上方公眾號，可快速關注）英文： Rafael González 譯文：碼農網 – 小峰 www.codeceo.com/article/css3-sass-3d-progress-bar.html 今天我們想向大家展示如何建立一些具有特殊3D外觀的純CSS進度條。不妨將本教程當作是一

Jquery實現可拖動進度條

div overflow 20px ext pan 點擊技術分享 img ani html 　　　　<div class="progress"> <div class="progress_bg">

【CSS系列】網頁頭部進度條方式一

absolute ati ffffff loading script 進度 header type pro <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

基於Jquery插件Uploadify實現實時顯示進度條上傳圖片

準備深入學習 pla 回調 true bar put and 分割網址：http://www.jb51.net/article/83811.htm 這篇文章主要介紹了基於Jquery插件Uploadify實現實時顯示進度條上傳圖片的相關資料，感興趣的小夥伴們可

基於Jquery的音樂播放器進度條插件

默認參數豆瓣 arw div clas type 重置示例 app 　　自己基於豆瓣FM的ui仿寫qq音樂時，基於Jquery手寫的進度條插件，效果圖如下：　　　　主要特色：　　　　① 可自適應掛載元素的寬度，也可以自己設置進度條寬度；　　　　② 支持部分默認參

jquery 實現拖動文件上傳加進度條

進行 con pos rip file round 默認 dex toupper 通過對文件的拖動實現文件的上傳，主要用到的是HTML5的ondrop事件，上傳內容通道FormData傳輸： //進度條 <div class="parent-dlg" >

純css進度條效果

frame lock 20px har div -html box overflow order <!DOCTYPE html> <html lang="zh"> <head> <meta c

11 Jquery UI Progressbar 進度條插件

ima 技術分享 isp splay -i display ack round wid 11 Jquery UI Progressbar 進度條插件

vue自定義進度條的製作方法（含css屬性值的兩種動態改變方式）

雛形部分接上一篇文章：https://blog.csdn.net/ColourfulTiger/article/details/82910505 結合vue製作自定義的進度條，優勢在於採用了vue特有的樣式繫結，與雙向繫結的方法，達到資料與進度條的進度一致。突破點：通過變數來動態改變屬性對

【CSS】靜態螺紋進度條和靜態流程佈局

為了方便複用，在此記錄一下！效果如圖所示 css核心程式碼： .active{ background-color:#fea6a2; background-image:repeating-linear-gradient(135deg, transparent 0

進度條製作-CSS動畫

溫馨提示程式碼參考 [本人部落格]：【https://blog.csdn.net/qq_41115965/article/details/83713343】程式碼修改不同於使用 GIF 圖片，使用 CSS3 動畫的時候 loading 佈局，應做以下改變:

BootStrap-CSS樣式_佈局元件_進度條

預設的進度條建立一個基本的進度條的步驟如下： 1.新增一個帶有 class .progress 的 <div>。 2.接著，在上面的 <div> 內，新增一個帶有 class .progress-bar 的空的 <div>。 3.新增一個帶有百分比表示的

HTML5 jQuery+FormData 非同步上傳檔案，帶進度條

利用jQuery和html5的FormData非同步上傳檔案的好處是：實現很簡單很方便地支援進度條很方便地進行擴充套件和美化先看看效果圖：圖片上傳後的結果：實現步驟如下：第二步：上傳頁面的html程式碼： [html] view plain

使用Jquery開源外掛實現檔案上傳（帶進度條）

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <

css 時間線麵包屑進度條

<div class="container"> <p>原文地址:http://www.cnblogs.com/xiaofeixiang/</p> <ul class="time-horizontal">

css 進度條

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="wid

不可思議的純 CSS 滾動進度條效果

結論先行，如何使用 CSS 實現下述滾動條效果？就是頂部黃色的滾動進度條，隨著頁面的滾動進度而變化長短。在繼續閱讀下文之前，你可以先緩一緩。嘗試思考一下上面的效果或者動手嘗試一下，不借助 JS ，能否巧妙的實現上述效果。 OK，繼續。這個效果是我在業務開發的過程中遇到的一個類似的小

上傳外掛，較輕量級，帶進度條 jquery.uploadify

jquery.uploadify+upload.js upload.js//附件的路徑 var adjunctPath=''; //附件上傳失敗則不能儲存 var canSubmit=true;

css+jquery步驟進度條

相關推薦