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 相关文章推荐
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 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
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
Python连接DB2数据库
2016/08/27 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
将字典转换为DataFrame并进行频次统计的方法
2018/04/08 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
高中生自我评语大全
2014/01/19 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers
python基础之模块的导入
2021/10/24 Python
海弦WR-800F
2022/04/05 无线电