纯html+css+jq实现流程图

最新推荐文章于 2024-04-17 10:01:59 发布
最新推荐文章于 2024-04-17 10:01:59 发布
阅读量4.1k 收藏 8
点赞数 3
分类专栏： 一些demo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HuangsTing/article/details/102516905
版权

效果图：

注：每个节点的宽高都已做了自适应处理
在这里插入图片描述
完整代码如下：（记得导入jQuery包）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程图</title>
    <script src="../assets/lib/jQuery.js"></script>
</head>
<body>
<ul id="process-list" class="process-list">
    <li class="node process-start">
        <div class="left">
            <p style="margin-bottom: 5px">开始</p>
            <div class="pot"></div>
        </div>
    </li>
    <li class="node process-node cur">
        <div class="left">
            <div class="platform" title="">节点1</div>
        </div>
        <div class="middle">
            <div class="line"></div>
        </div>
        <div class="right-l">
            <p class="type">审批方式xx</p>
            <table class="node-table">
                <thead>
                <tr>
                    <td style="max-width: 190px;">审批单位</td>
                    <td style="max-width: 90px">审批人</td>
                    <td>审批状态</td>
                    <td>时间</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="max-width: 190px" title="">文本文本文本文本文本</td>
                    <td style="max-width: 90px" title="">张三</td>
                    <td>待审批</td>
                    <td>2019-10-12 12:30:30</td>
                </tr>
                <tr>
                    <td style="max-width: 190px" title="">文本文本文本</td>
                    <td style="max-width: 90px" title="">张三三</td>
                    <td>待审批</td>
                    <td>-</td>
                </tr>
                </tbody>
            </table>
            <div class="current">当前节点</div>
        </div>
    </li>
    <li class="node process-node wait">
        <div class="left">
            <div class="platform" title="">节点2</div>
        </div>
        <div class="middle">
            <div class="line"></div>
        </div>
        <div class="right-l">
            <p class="type">审批方式xx</p>
            <table class="node-table">
                <thead>
                <tr>
                    <td style="max-width: 190px">审批单位</td>
                    <td style="max-width: 90px">审批人</td>
                    <td>审批状态</td>
                    <td>时间</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="max-width: 190px" title="">文本文本文</td>
                    <td style="max-width: 90px" title="">张三</td>
                    <td>待审批</td>
                    <td>-</td>
                </tr>
                </tbody>
            </table>
        </div>
    </li>
    <li class="node process-node wait">
        <div class="left">
            <div class="platform" title="">节点3</div>
        </div>
        <div class="middle">
            <div class="line"></div>
        </div>
        <div class="right-l">
            <p class="type">审批方式xx</p>
            <table class="node-table">
                <thead>
                <tr>
                    <td style="max-width: 190px">审批单位</td>
                    <td style="max-width: 90px">审批人</td>
                    <td>审批状态</td>
                    <td>时间</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="max-width: 190px" title="">文本文本文本文本文本</td>
                    <td style="max-width: 90px" title="">张三</td>
                    <td>待审批</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td style="max-width: 190px" title="">文本文本文本文本文本</td>
                    <td style="max-width: 90px" title="">张三</td>
                    <td>待审批</td>
                    <td>-</td>
                </tr>
                </tbody>
            </table>
        </div>
    </li>
    <li class="node process-end wait">
        <div class="left">
            <div class="pot"></div>
            <p style="line-height: 24px">流程结束</p>
        </div>
    </li>
</ul>

<style>
    p{
        margin: 0;
    }
    .process-list{
        font-size: 0;
        width: 950px;
        margin: 0 auto;
    }
    .process-list li{
        position: relative;
    }
    .process-list li.node{
        margin-bottom: 60px;
    }
    .process-list li.line{
        height: 80px;
    }
    .process-start,.process-end{
        height: 36px !important;
    }
    .process-start p,.process-end p{
        font-size: 14px;
    }
    .process-list li div.pot{
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 20px;
        border: 1px solid #333;
        background: #fff;
    }
    .process-list li.line div.line{
        display: inline-block;
        height: 80px;
        width: 2px;
        border-left: 1px solid #333;
        margin-left: 1px;
    }
    .process-list li div.left{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        display: inline-block;
        width: 400px;
        text-align: center;
        z-index: 9;
    }
    .process-list li.process-node div.right-l:before{
        content: '';
        position: absolute;
        bottom: 50%;
        left: 199px;
        width: 1px;
        height: 50%;
        background: #333;
        padding-top: 60px;
    }
    .process-list li.process-end div.left{
        position: absolute;
        top: 0 !important;
        transform: translateY(0) !important;
    }

    .process-list li.process-end div.left:before{
        content: '';
        position: absolute;
        bottom: 35px;
        left: 199px;
        width: 1px;
        height: 65px;
        background: #333;
    }

    .process-list li.process-node div.right-l:after{
        content: '';
        position: absolute;
        top: 50%;
        left: 199px;
        width: 1px;
        height: 50%;
        background: #333;
    }

    .process-list li div.middle{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 199px;
        display: inline-block;
        width: 250px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        z-index: 1;
    }
    .process-list li div.right-l{
        margin-left: 450px;
        z-index: 1;
        background: #fff;
    }
    .process-list li div.right-l p{
        font-size: 14px;
        padding: 5px 25px;
    }

    .node-table{
        font-size: 14px !important;
        border: 1px solid #333;
    }
    .node-table thead{
        font-weight: bold;
    }
    .node-table td{
        padding: 5px 10px;
        vertical-align: top;
    }

    .process-list li div.right-l div.current{
        font-size: 14px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: -44px;
        color: red;
    }
    .process-list li div.right-l div.current::before{
        content: '';
        width: 14px;
        height: 14px;
        /*background: url("../../assets/img/icon_arrow_right.png") no-repeat;*/
        background-size: 14px 14px;
        position: absolute;
        top: 3px;
        right: -25px;
    }
    .process-list li div.right-l p.type{
        position: absolute;
        top: -30px;
        left: 430px;
    }
    .process-list li div.middle div.line{
        display: inline-block;
        width: 250px;
        height: 1px;
        text-align: center;
        border-top: 1px dashed #333;
    }
    .process-list li.process-node div.platform{
        max-width: 300px;
        box-sizing: border-box;
        display: inline-block;
        padding: 10px 15px;
        border: 1px solid #333;
        border-radius: 999px;
        font-size: 14px;
        background: #fff;
        overflow: hidden;
        word-wrap: break-word;
        /*white-space: nowrap;*/
    }

    .process-list li.cur div.right-l:after{
        background: #bbbaba;
    }
    .process-list li.wait{
        color: #bbbaba;
    }
    .process-list li.wait div.platform{
        border-color: #bbbaba;
    }
    .process-list li.wait div.line{
        border-color: #bbbaba;
    }
    .process-list li.wait div.middle div.line{
        border-color: #bbbaba;
    }
    .process-list li.wait div.right-l>table{
        border-color: #bbbaba;
    }
    .process-list li.wait div.right-l:before{
        background: #bbbaba;
    }
    .process-list li.wait div.right-l:after{
        background: #bbbaba;
    }
    .process-list li.wait div.left:before{
        background: #bbbaba;
    }
    .process-list li.wait div.pot{
        border-color: #bbbaba;
    }
    .process-list li p.simple{
        color: #bbbaba;
    }
</style>

<script>
    //未进行的流程置灰
    $('#process-list li.cur').nextAll().addClass('wait');
    //当前节点添加说明
    $('#process-list li.cur').find('.right-l').append('<div class="current">当前节点</div>');
</script>
</body>
</html>
hst❀
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html实现原理和流程图,原生js+div+css，动态画结构图/流程图
weixin_29415575的博客
06-01 1906
前面用highchart尝试画了一次，但是因为种种因素，还是用js+div+css实现起来比较方便。代码如下，可直接复制粘贴。html部分：content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">动态绘制结构图* {margin: 0;pad...
html制作课程导航页面,学成在线页面制作（HTML+CSS部分）（顶部+轮播图部分）...
weixin_29717875的博客
06-04 1709
学成在线页面制作(HTML+CSS部分)(顶部+轮播图部分)成品截图前期准备素材一、项目页面PSD源文件二、前期准备工作三、CSS属性书写顺序四、布局分析五、布局流程开始页面制作头部制作banner制作左侧导航栏课程表模块源代码下载成品截图 前期准备素材一、项目页面PSD源文件下载地址https://chuenst.lanzous.com/i7hlggnl6vc二、前期准备工作 创建study目...
基于HTML5流程图绘制代码
03-11
实现流程图绘制、拓扑图等自定义绘制功能，具有丰富的的图形选择。
html实现原理和流程图,html5实现流程图
weixin_29952235的博客
06-01 2348
以前在IE盛行，微软一家独大的时候，web绘图功能首选就是VML，IE5.0以上的版本都支持VML，VML可以在IE中通过文本的方式绘制矢量图像，类似在html页面中实现了画笔的功能，所以被很多人采用来实现web流程设计器。随着手机，ipad等各种移动设备的升级，越来越多的应用要求支持这些移动设备。很可惜VML只支持IE，手机和ipad大部分是chrome和safari，不支持VML，web绘制流...
探索jQuery Flowchart：构建直观流程图的利器
最新发布
gitblog_00007的博客
04-17 421
探索jQuery Flowchart：构建直观流程图的利器 项目地址:https://gitcode.com/sdrdis/jquery.flowchart 在软件开发和业务流程设计中，流程图是一种强大的可视化工具。它能够帮助我们清晰地表达逻辑结构，使得复杂的过程变得易于理解和管理。而今天，我们要介绍一个名为jQuery Flowchart的开源项目，这是一个利用JavaScript和jQuery...
审批流程html.zip
03-08
使用html+css+js实现流程图设计，无需其他任何插件，可随意在任何位置添加节点或者条件，操作方便，无需定位。
html流程图
qq_45432865的博客
08-03 3212
HTML总结流程图
基于JQUERY的WEB在线流程图设计器GOOFLOW 0.3版
sdlddr
04-28 363
 跨浏览器，可兼容IE7--IE10， FireFox， Chrome， Opera等几大内核的浏览器，且不需要浏览器再加装任何控件。  多系统兼容性、可移植性:由于只包括前台UI,因此二次开发者可很方便将本插件用在任何一种需要流程图的B/S系统应用上，流程图的详细实现逻辑完全交于后台程序开发者自己实现;对于后台,只要能返回/接收能被本插件解析的JSON格式数据即可.所以本插件可用于不同的...
带拆分的纯CSS流程图
03-30
通过纯CSS实现流程图，意味着不依赖JavaScript库如jQuery (jq) 或其他第三方工具，而是利用CSS的特性来构造图形元素。 1. **CSS选择器与布局**：创建流程图需要对CSS的选择器有深入理解，例如类选择器、ID选择器、...
前端练习实例，js+jq+css+html
12-30
在前端开发领域，JavaScript、jQuery、CSS以及HTML5是构建现代网页交互体验不可或缺的技术栈。这个压缩包提供了丰富的实例，适合新手用来提升自己的前端技能，理解并实践如何将这些技术结合，实现各种页面动态功能。...
html+jq 前端小白电商网站demo
01-30
在电商网站Demo中，`jquery.js`或者`script.js`等文件可能会处理用户交互，如点击事件、滑动效果、表单验证等，同时，JQ也可能用于动态加载数据、实现商品轮播图、添加至购物车等实用功能。 `images`目录存放着网站...
jquery的很好的一个例子，绘制流程图的例子。
12-10
jquery的很好的一个例子，是一个jquery绘制流程的一个例子。
JQuery流程图
05-11
JQuery流程图,绝对给力，里面包含三个不同的流程图，可以自己定制修改 1.flow 2.processDesigner 3.proctool
jq比较简化轻便的流程图
02-28
综上所述，"jq比较简化轻便的流程图"是利用jQuery和合适的js插件，以简洁的代码实现动态、交互的流程图展示。这种方法降低了开发复杂度，提高了代码可维护性，同时也为用户提供了一种直观且易于操作的方式来理解和...
仿小米官网(html+js+css)，html5+jq+css 做的小米官网首页，实现le小米官网所有特效，有需要的小伙伴赶紧下载吧
12-21
例如，开发者可能会用CSS来实现导航栏的下拉菜单、轮播图的切换效果以及悬停状态的样式变化。 JavaScript（在这里使用了jQuery库）是实现动态功能的关键。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件...
html css画流程图,css canvas 绘制流程图(1)
weixin_31124163的博客
06-09 2204
//1.引入js//画流程图//画所有的图形：画图和画对应的箭头function drawFlowChart(context, canvas, flowdata, initTop, initSpaceH) {//1、判断是否有需要平均计算x的数据flowdata.forEach(function (row) {if (row.isAverage) {row.data = calChartX(can...
最近做的排班表，整个表格全JS动态生成，用了很多Jquery的库，4个主要页面
weixin_30883311的博客
05-28 1277
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <h...
html + jquery 原生开发ToDo网页
编程书生的博客
08-06 603
html + jquery 原生开发ToDo网页 相信做前端的大家都见过这个网页吧 TodoMVC Vue的入门网页 今天我用原生html实现一下 首先看一下html部分的代码： <html> <head> <meta charset="utf-8"> <title>幸运记事</title> <link...
jQuery插件开发精品教程，让你的jQuery提升一个台阶1
weixin_33845477的博客
10-14 166
2019独角兽企业重金招聘Python工程师标准>>> ...
纯html+css轮播图代码
06-06
以下是纯HTML和CSS实现的轮播图代码： HTML代码： ``` <div class="slideshow-container"> <input type="radio" name="slide" id="slide1" checked> <input type="radio" name="slide" id="slide2"> <input type="radio" name="slide" id="slide3"> <div class="slideshow"> <div class="slide"> <img src="img1.jpg"> </div> <div class="slide"> <img src="img2.jpg"> </div> <div class="slide"> <img src="img3.jpg"> </div> </div> <div class="nav"> <label for="slide1"></label> <label for="slide2"></label> <label for="slide3"></label> </div> </div> ``` CSS代码： ``` .slideshow-container { max-width: 800px; position: relative; margin: auto; } .slideshow { display: flex; overflow: hidden; } .slide { flex: 1; width: 100%; transition: all 1s ease; } .slide img { width: 100%; } .nav { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; } .nav label { cursor: pointer; display: block; width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; background-color: #ccc; } .nav label:hover { background-color: #555; } input[type="radio"] { display: none; } input[type="radio"]:checked + .slideshow .slide { width: 0; } input[type="radio"]:checked + .slideshow .slide:nth-of-type(1) { width: 100%; } input[type="radio"]:checked + .slideshow .slide:nth-of-type(2) { width: 100%; } input[type="radio"]:checked + .slideshow .slide:nth-of-type(3) { width: 100%; } input[type="radio"]:checked + .nav label { background-color: #555; } ``` 这个轮播图的实现方式是通过使用radio和label元素来实现的。HTML代码中的input元素用于定义轮播图的切换按钮，label元素用于定义按钮的样式。CSS代码中的.nav类用于定义按钮容器的样式，其中transform属性被设置为translateX(-50%)以实现水平居中。radio元素的:checked伪类被用于控制轮播图的显示，其中:nth-of-type()伪类用于控制每个轮播图的显示方式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值