jquery css实现流程进度条
本文实例为大家分享了jquery css实现流程进度条的具体代码，供大家参考，具体内容如下
方案1：
方案2：
<!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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
基于HTML5 Ajax文件上传进度条如何实现（jquery版本）
在上篇文章给大家介绍了这篇文章里面的后台Servlet.所以这里只看前台的JS代码. 首先HTML5用AJAX提交数据先要学习一个HTML5新增加的对象:FormData FormData 对象可以使用append 方法进行 key - value的数据添加,与以前我们常用的json不同的就是可以异步上传二进制文件. 1.FormDate对象的创建 var formData = new FormData(); 2.向 FormDate 对象添加数据 formData.append("catnam
-
jQuery实现简单的文件上传进度条效果
本文实例讲述了jQuery实现文件上传进度条效果的代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>upload</title> <link rel="stylesheet" type="text/css" href=&quo
-
jquery-file-upload 文件上传带进度条效果
jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传.取消.删除,上传前缩略图预览.列表显示图片大小,支持上传进度条显示:支持各种动态语言开发的服务器端. 效果图如下所示: html 部分 <div style="line-height:34px;margin-top:20px;"> <label style="float: left;font-size:14px">上传文件:</label> &l
-
Jquery Uploadify多文件上传带进度条且传递自己的参数
复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" r
-
jQuery实现文件上传进度条特效
上传进度条通常是由前面jquery加后端了脚本器脚本来实现了,今天我们介绍的是一款基本php+jQuery实现文件上传进度条效果的例子,具体细节如下. 最近呢,一个项目做一个进度条的效果出来,这个之前还真没做过.刚好这周没什么东西了,就拿这个来充一下数吧. 文件上传,得先准备一个"按钮": 这个看上去还是不错的吧,实现也是很简单的: <span class="upload-span">开始上传文件</span> <button>太
-
jQuery监听文件上传实现进度条效果的方法
原理: 给XMLHttpRequest对象的upload属性绑定onprogress方法监听上传过程 var xhr=new XMLHttpRequest(); xhr.upload.onprogress=function(e){} 因为jQuery默认使用的XMLHttpRequest对象是内部生成的无法直接给jq的xhr绑定onprogress方法 所以只要给jQuery重新生成一个绑定了onprogress的XMLHttpRequest对象即可实现 首先封装一个方法 传入一个监听函数 返回
-
Jquery和BigFileUpload实现大文件上传及进度条显示
实现方法:用到了高山来客 的bigfileupload组件,用高山来客的方法,弹出一个模式窗口,然后不停刷新获取进度,始终觉得体验感不好,于是想到用jquery来实现无刷新进度显示,因为提交页面后, 不能让其刷新页面,而是要不断地通过ajax获取progress.aspx返回的进度信息,所以用到了jquery.form的ajaxform提交.ajaxform提交后如果执行提交后的事件,比如在数据库里插入记录,还在调试中. 1.用到了jquery 的 progressbar .form.MultF
-
基于Jquery插件Uploadify实现实时显示进度条上传图片
先了解了解Uploadify,具体内容如下 Uploadify是一个简单易用的多文件上传方案.作为一个Jquery插件,Uploadify使用简单,并具有高度的定制性. Uploadify特性: Uploadify简单说来,是基于Jquery的一款文件上传插件.它的功能特色总结如下: 1).支持单文件或多文件上传,可控制并发上传的文件数 2).在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java-- 3).通过参数可配置上传文件类型及大小限制 4).通过参数可配置是否选择文件后自动
-
Jquery Uploadify上传带进度条的简单实例
复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs" Inherits="UploadifyDemo_UpLoad" %> <html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" ru
-
jquery插件uploadify实现带进度条的文件批量上传
有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案,分享给大家供大家参考,具体如下 先上效果图: 具体代码如下: 在页面中如下 完整页面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <