css+jquery步骤进度条

最新推荐文章于 2024-05-12 22:01:36 发布
最新推荐文章于 2024-05-12 22:01:36 发布
阅读量4.6k 收藏 8
点赞数 2
分类专栏： js html+css/html5 文章标签： 步骤进度条 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014788227/article/details/52219658
版权 
<!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>



timelessmemoryli
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS实现步骤进度条——前端每日一练
qq_42544728的博客
11-16 3760
向上间隔50%的高度，由于存在自身的高度，到哪都使用该属性并不会显示居中。：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。向上移动相对自身高度的50%，和上一个属性结合可以实现垂直居中显示。：生成相对定位的元素，相对于其正常位置进行定位。的默认数值指向全局对象，浏览器就是。的数值不是由该调用设置的，因此。盒子包裹所有内容，里面划分为。但是在JavaScript中。，六个⭕分别对应着六个子。由于下面的代码并不是在。指的是当前对象的一个。call和apply。
纯css实现步骤条
coldriversnow的专栏
12-05 1750
纯css写的步骤条直接上代码。
纯CSS实现步骤条
最新发布
JavaScritp
05-12 554
步骤条是一种用于引导用户按照特定流程完成任务的导航条，在各种分步表单交互场景中广泛应用。步骤条通常由编号、名称和引导线三个基本要素组成。本文中要实现的是一个简单的步骤条，包含上述三个基本要素。
记录--纯CSS实现一个简单又不失优雅的步骤条
林恒的博客
06-07 3276
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 步骤条是一种用于引导用户按照特定流程完成任务的导航条，在各种分步表单交互场景中广泛应用。先来看一下几个主流前端 UI 框架中步骤条组件的样子： ElementPlus AntDesign OpenTiny iView 我们可以发现，步骤条通常由编号、名称和引导线三个基本要素组成。本文中要实现的是一个简单...
css3实现步骤进度条
最爱喝怡宝的博客
11-28 618
使用伪类完成箭头样式步骤条： 布局部分： <body> <div class="main"> <div class="item">需求讨论</div> <div class="item">需求讨论</div> <div class="item">需求讨论</div> <div class="item">需求讨论</div>
jquery css 流程进度条
bkuangb的博客
03-07 3217
方案1：方案2：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;流程进度条&lt;/title&gt; &lt;style type="text/css"&gt; .div_home{ width: 100%; h
jQuery步骤进度条样式特效代码
03-20
本资源"jQuery步骤进度条样式特效代码"是为实现一个功能丰富的步骤进度条而设计的，它允许用户在多步骤流程中自由前进或后退，甚至直接跳至特定步骤。这种进度条在网页表单提交、购物车结账流程、多阶段调查或任何...
jQuery+CSS3进度条动画特效特效代码
03-20
通过以上步骤，我们就能实现一个具有jQuery控制和CSS3动画的进度条。这个特效代码不仅展示了这两项技术的结合，还提供了一种在网站和应用中增强用户体验的方法。记得根据实际需求调整颜色、尺寸和动画速度，以适应...
jQuery步骤进度条样式代码
04-07
总结来说，`jQuery步骤进度条样式代码`是一种有效的网页交互设计实践，通过结合HTML、CSS和jQuery，为用户提供了一种直观的方式来跟踪他们在多步骤表单中的进度。通过理解和应用这些知识点，开发者可以创建出更加...
jQuery步骤进度条控制特效代码
03-20
总的来说，创建一个jQuery步骤进度条控制特效涉及理解jQuery选择器、事件处理、样式修改和动画。这个过程可以帮助开发者提升用户体验，清晰地展示流程进度，同时提供灵活的用户交互。通过实践和学习，你可以创建出...
jQuery步骤进度条样式代码.zip
11-19
"jQuery步骤进度条样式代码"就是一个专注于这一需求的代码示例，它结合了CSS、JavaScript、jQuery和HTML5技术，为用户提供了一种动态展示任务进度或步骤完成情况的方式。 首先，让我们了解一下这个项目的组成部分：...
jQuery-带节点步骤进度条插件
03-07
jQuery-带节点步骤进度条插件
CSS步骤条，进度条
04-27
CSS步骤条，进度条，纯css，挺舒服的，可惜不能传图片
jquery进度条
11-30
简单易懂的jquery进度条制作，方便学习和使用，启发思路。
jq带节点的步骤进度条
09-24
该功能是利用jq实现的步骤进度条，包括两种样式，输入步骤，展示事件进行到第几步，方便查看，简易上手的网页步骤流程进度条代码
用CSS实现简单的进度条
wenling0629的专栏
04-02 289
#graphbox{ border:1px solid #e7e7e7; padding:10px; width:250px; background-color:#f8f8f8; margin:5px 0; } #graphbox h2{ color:#666666; font-family:Arial; font-size:18px; font-weight:700; }
css样式制作步骤流程进度条
weixin_39852181的博客
06-19 2049
效果图如下 html部分只需要一个ul列表即可（进度条首尾根据自身需求去做修改） css样式部分代码 第一步：生成一个长方形效果 第二步：根据：after在长方形后面生成一个三角形 第三步：修改后面三角形颜色 第四步：通过：before在长方形前面生成三角形并做位置颜色处理 此时已基本完成效果图； ...
jq步骤条 java,jQuery步骤条进度条插件setStep.js
weixin_35869703的博客
03-16 831
插件描述：一款简单额步骤条，可点击 也可按钮控制。更新时间：2018/9/4 上午10:42:15更新说明：增加横向箭头样式步骤条。用法：varstep1=newSetStep({skin:3,//调节1,2,3更换皮肤。content:'.skin1',showBtn:false,descripttionHeader:['步骤一','步骤二','步骤三','步骤四',...
html流程进度效果,jQuery流程进度显示效果
weixin_39826342的博客
06-04 199
HtmlCssJs* {margin:0;padding:0;list-style:none;}.eStep-warp {width:600px;position:relative;margin:0 auto;margin-top:100px;}.eStep {display:flex;width:100%;}.eStep-item {flex:1;height:10px;background:#...
jquery 步骤进度条
09-16
可以使用 jQuery UI 的 Progressbar 组件来创建步骤进度条。以下是一个简单的示例代码： HTML: ``` <div id="progressbar"></div> ``` JavaScript: ``` $(function() { var progressbar = $("#progressbar"); ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值