jquery css实现流程进度条


Posted in jQuery onMarch 26, 2020

本文实例为大家分享了jquery css实现流程进度条的具体代码,供大家参考,具体内容如下

方案1:

jquery css实现流程进度条

方案2:

jquery css实现流程进度条

<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8">
<title>流程进度条</title>
<style type="text/css"> 
 .div_home{
 width: 100%;
 height: 720px;
 background: pink;
 }
 .div_button{
 width: 100%;
 background: rgba(249, 214, 81, 1);
 text-align: center;
 }
 
 :root {
 --progress_div-height: 100px;
 --progress_div-width: 100%;
 --progress_div-background: rgba(204,232,207,1);
 
 --progress_line-top: 50px;
 --progress_line-height: 4px;
 
 --progress_node-height: 20px;
 --progress_node-width: 20px;
 --progress_node-top: -8px;
 --progress_node-lineHeight: 20px;
 
 --progress_text-heigth: 20px;
 --progress_text-width: 120px;
 --progress_text-top: -30px;
 
 --progress_color-yes: rgba(40 ,200 ,252 ,1);
 --progress_color-no: rgba(213 ,213 ,213 ,1);
 }
 .progress_div{
 height: var(--progress_div-height);
 width: var(--progress_div-width);
 background: var(--progress_div-background);
 text-align: center;
 margin: auto 0;
 }
 /*灰条样式*/
 .progress_line_no{
 position: relative;
 top: var(--progress_line-top);
 height: var(--progress_line-height);
 background: var(--progress_color-no);
 }
 /*蓝条样式*/
 .progress_line_yes{
 height: var(--progress_line-height);
 background: var(--progress_color-yes);
 }
 /*未激活节点样式*/
 .progress_node_no{
 position: absolute;
 border-radius: 100%;
 width: var(--progress_node-width);
 height: var(--progress_node-height);
 top: var(--progress_node-top);
 line-height: var(--progress_node-lineHeight);
 background: var(--progress_color-no);
 color: var(--progress_color-no);
 }
 /*已激活节点样式*/
 .progress_node_yes{
 position: absolute;
 border-radius: 100%;
 width: var(--progress_node-width);
 height: var(--progress_node-height);
 top: var(--progress_node-top);
 line-height: var(--progress_node-lineHeight);
 background: var(--progress_color-yes);
 color: var(--progress_color-yes);
 }
 /*节点文字*/
 .progress_text{
 position: absolute;
 vertical-align: middle;
 text-align: center;
 width: var(--progress_text-width);
 height: var(--progress_text-heigth);
 top: var(--progress_text-top);
 }
 /*当前激活节点标记*/
 .progress_node_currentActive{
 }
</style>
</head>
 
<body>
 <div class="div_home">
 <div class="progress_div">
 <div class="progress_line_no">
 <div class="progress_line_yes">
 <div>
 <div class="progress_text">1</div>
 </div>
 <div>
 <div class="progress_text">2</div>
 </div>
 <div>
 <div class="progress_text">3</div>
 </div>
 <div class="progress_node_currentActive">
 <div class="progress_text">4</div>
 </div>
 <div>
 <div class="progress_text">5</div>
 </div>
 </div>
 </div>
 </div>
 <div class="div_button">
 <input type="button" οnclick="skipNode(-1)" value="上一步">
 <input type="button" οnclick="skipNode(1)" value="下一步">
 </div>
 </div>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
 $(function(){
 //传入灰条长度,传入最后一个激活节点下标
 loadProgress(1000 ,2);
 });
 
 //上一步type=-1,下一步type=1
 function skipNode(type){
 var currentNum = 0;
 var countNum = $('.progress_line_no > .progress_line_yes > div').length;
 //获取当前激活节点的下标
 $('.progress_line_no > .progress_line_yes > div').each(function(i ,data){
 if($(data).hasClass('progress_node_currentActive') == true){
 currentNum = i;
 }
 });
 //当前为first,上一步无效;当前为last,下一步无效
 if((type == -1 && currentNum == 0) || (type == 1 && currentNum == countNum - 1)){
 return;
 }
 //重新设置激活节点标记
 $('.progress_line_no > .progress_line_yes > div').each(function(i ,data){
 $(data).removeClass();
 if(type == -1 && currentNum - 1 == i){
 $(data).addClass('progress_node_currentActive');
 }
 if(type == 1 && currentNum + 1 == i){
 $(data).addClass('progress_node_currentActive');
 }
 });
 //重新载入流程进度条样式(传入原进度条长度)
 loadProgress($('.progress_line_no').width());
 }
 
 //加载流程进度条,inLineWidth进度条长度,inCurrentNum最后一个激活节点下标(从0开始到length-1)
 function loadProgress(inLineWidth ,inCurrentNum){
 var countNum = $('.progress_line_no > .progress_line_yes > div').length;//总节点数
 var currentNum;//当前激活节点下标
 
 //当前激活节点优先级:loadProgress()方法传入为最高级别,其次是div上class="progress_node_currentActive",最后默认0
 if(inCurrentNum != undefined && inCurrentNum > -1 && inCurrentNum < countNum){
 //传入的节点正确取传入的节点为当前激活节点
 currentNum = inCurrentNum;
 } else {
 //存入的节点不正确,根据节点上的progress_node_currentActive设置当前激活节点
 $('.progress_line_no > .progress_line_yes > div').each(function(i ,data){
 if($(data).hasClass('progress_node_currentActive') == true){
 currentNum = i;
 }
 });
 }
 if(currentNum == undefined){
 //未传入节点或传入的节点不正确 且div上没发现progress_node_currentActive标识,设置当前激活节点为0
 currentNum = 0;
 }
 
 var line_width_no = inLineWidth;//灰条长度
 var line_width_yes;//蓝条长度
 var node_distance = line_width_no / (countNum - 1);//两点间距
 var node_mid_distance = node_distance / 2;//两点中距(间距/2)
 
 $('.progress_line_no').width(line_width_no + 'px');//设置灰条长度
 $('.progress_line_no').css('left' ,($('.progress_line_no').parent().width() - line_width_no) / 2 + 'px');//设置灰条相对于父级div居中偏移
 
 //设置节点和文字
 $('.progress_line_no > .progress_line_yes > div').each(function(i ,data){
 $(data).removeClass();//移除所有样式
 //设置当前激活节点为progress_node_currentActive
 if(currentNum == i){
 $(data).addClass('progress_node_currentActive');
 }
 if(i == 0){
 //设置first节点
 $(data).addClass('progress_node_yes').css('left' ,i * node_distance - ($(data).width() / 2) + 'px');
 }else if(i <= currentNum){
 //设置激活节点
 $(data).addClass('progress_node_yes').css('left' ,i * node_distance - ($(data).width() / 2) + 'px');
 }else{
 //设置未激活节点
 $(data).addClass('progress_node_no').css('left' ,i * node_distance - ($(data).width() / 2) + 'px');
 }
 //设置文字偏移位置
 $(data).children().css('left' ,-($(data).children().width() / 2) + 10+'px');
 });
 
 /*方案1,计算蓝条长度
 */
 line_width_yes = line_width_no * currentNum / (countNum - 1);
 
 /*方案2,计算蓝条长度
 if(currentNum == 0){
 //first节点为progress_node_currentActive时蓝条长度
 line_width_yes = node_mid_distance * 1;
 }else if(currentNum == countNum - 1){
 //last节点为progress_node_currentActive时蓝条长度
 line_width_yes = node_mid_distance * (countNum - 1) * 2;
 }else{
 //中间节点为progress_node_currentActive时蓝条长度
 line_width_yes = node_mid_distance * (currentNum * 2 + 1);
 }
 */
 
 //设置蓝条长度
 $('.progress_line_yes').width( line_width_yes + 'px');
 }
</script>
</body>
 
</html>

使用:

1.首先要引入一个jquery.js

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

2.CSS:

:root开始所有css(css基本上都使用的变量,改样式只需要改:root里的变量值就行)

3.JS:

保留所有js方法
调用loadProgress(1000,2)方法,传入进度条长度、最后一个激活节点下标(0到节点的length-1)
186行设置了整体相对于父级div居中,自己看需求改一下就好

4.标签:

主要就是class="progress_line_no"的div里的所有元素,最里面的两层div就是节点,class="progress_text"的div是文字,它们的父级div是圆点

5.激活节点优先级

loadProgress(width,index)方法传入index为最高级别,其次是div上class="progress_node_currentActive",最后默认0

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
纯jQuery实现前端分页功能
Mar 23 jQuery
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jQuery中库的引用方法
Jan 06 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
jquery实现上传文件进度条
Mar 26 #jQuery
jquery实现进度条状态展示
Mar 26 #jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 #jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 #jQuery
jQuery实现颜色打字机的完整代码
Mar 19 #jQuery
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 #jQuery
jquery实现烟花效果(面向对象)
Mar 10 #jQuery
You might like
一个PHP针对数字的加密解密类
2014/03/20 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
PHP实现微信小程序人脸识别刷脸登录功能
2018/05/24 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python中Threading用法详解
2017/12/27 Python
Python实现线程状态监测简单示例
2018/03/28 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
代码详解django中数据库设置
2019/01/28 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
EJB实例的生命周期
2016/10/28 面试题
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
防火标语大全
2014/10/06 职场文书
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB
Python使用MapReduce进行简单的销售统计
2022/04/22 Python