用html+css+jQuery制作一个简单的流程图/步骤图

首先在页面内需要呈现的区域创建一个容器，用来之后append新元素。
```
 <body><div class="container"></div></body>
```

获取需要的流程数据，我这里定义一个假数据。

var arr = ["前处理生产指令", "前处理", "批生产指令", "中间产品递交单", "阿胶提取粗滤", "胶液分离浓缩", "总混", "流程1", "流程2", "流程3", "流程4", "流程5", "流程6", "流程7", "流程8", "流程9", "流程10", "流程11"];

jQuery部分，循环遍历数组，每遍历一次创建一个html片段，并插入当前行，这里做的if判断，每生成5个自动换行，然后继续插入。

// 循环生成步骤项$(arr).each(function (index, item) {// 第一个或者每循环6个，在尾部生成一行新的ul标签，也就是每5个一行if (index == 0 || index % 5 == 0) {$(".container").append("<ul></ul>");}// 生成固定的html片段$newvar $new = $(`<div class="shell"><li><div class="item"><span style="font-size: 36px;color: #0096ED;">${index + 1}</span><p>${item}</p></div></li><div class="content"><button>文件上传11111111111111111111111111111<br>1<br>2<br>3</button></div></div>`);// 每遍历一次，就往当前文档中最后一个ul下的尾部添加进去一个$new$(`ul:last-of-type`).append($new);// 此处还需要放入虚线部分代码});

创建一条虚线，加在每个元素之前，如果元素在当前行第一位，则不加虚线。

// 创建一条虚线var $line = $(`<div class="line"></div>`);// 判断:如果是当前行第一个元素，元素前不加虚线，如果不是第一个，在元素前加虚线if (index % 5 != 0 && index > 0) {$new.before($line);}

第3步+第4步合并起来

$(function () {// 数据var arr = ["前处理生产指令", "前处理", "批生产指令", "中间产品递交单", "阿胶提取粗滤", "胶液分离浓缩", "总混", "流程1", "流程2", "流程3", "流程4", "流程5", "流程6", "流程7", "流程8", "流程9", "流程10", "流程11"];// 循环生成步骤项$(arr).each(function (index, item) {// 第一个或者每循环6个，在尾部生成一行新的ul标签，也就是每5个一行if (index == 0 || index % 5 == 0) {$(".container").append("<ul></ul>");}// 生成固定的html片段$newvar $new = $(`<div class="shell"><li><div class="item"><span style="font-size: 36px;color: #0096ED;">${index + 1}</span><p>${item}</p></div></li><div class="content"><button>文件上传11111111111111111111111111111<br>1<br>2<br>3</button></div></div>`);// 每遍历一次，就往当前文档中最后一个ul下的尾部添加进去一个$new$(`ul:last-of-type`).append($new);// 创建一条虚线var $line = $(`<div class="line"></div>`);// 判断:如果是当前行第一个元素，元素前不加虚线，如果不是第一个，在元素前加虚线if (index % 5 != 0 && index > 0) {$new.before($line);}});});

CSS部分

      ul {display: flex;}li {display: flex;list-style: none;position: relative;}.item {width: 120px;height: 100px;text-align: center;position: relative;margin: 0 auto;}.line {border-bottom: 1px dashed rgba(3, 2, 2, 0.7);width: 120px;align-self: center;position: relative;top: -50px;}.shell {height: 200px;position: relative;}.content {width: 200px;height: 100px;text-align: center;position: absolute;left: -50%;margin-left: 25px;display: flex;align-items: center;justify-content: center;}

这是效果图：

这里的button按钮是我为了测试样式瞎写的，大家后面根据自己的需求更改。

这是一个非常简单明了的流程图，虽然有一点丑 :)

希望能帮到有需要的人，如果有问题可以给我留言 :)

用html+css+jQuery制作一个简单的流程图/步骤图相关推荐

制作一个简单的轮播图（详解新手教学）
制作一个简单的轮播图(详解新手教学) 相信很多初学者,无论是前端还是后端,对于制作页面时,都想自己亲手制作一个轮播图. 如何制作一个轮播图: 基础知识:有HTML,Css,js基础本文使用技术: H ...
制作一个简单的轮播图
记录一下轮播图制作(这里用的是原生js制作的) 前期准备工作 1.自己用的顺手的开发工具,我这里用的时HBuilder来写的 2.创建项目 3.在项目中创建images.css.js文件夹,把需要制作 ...
用DIV+CSS技术制作一个简单的网页我的家乡主题
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...
使用HTML5，CSS。制作一个简单有新颖的“网易云音乐排行榜“。
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
jquery制作一个简单的日历
jquery是用的是2.0版本. 1.html代码 <!DOCTYPE html>  <html> <!--起始标 ...
使用jQuery写一个简单的轮播图（笔记）
html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
ECharts的学习（二）：制作一个简单的饼状图，并对其设置样式
这是学习ECharts的练手之作,中文学习网址:http://echarts.baidu.com/index.html 实现效果图如下: <!DOCTYPE html> <html& ...
jQuery实现一个简单的轮播图
一.轮播图内容组成包括:4张图片,图片标号,向左翻页,向右翻页的几个部分,如下图所示: 二.实现功能 1.加载页面后,4张图片默认从第一张图片开始轮播,索引值为1. 2.当把鼠标over到图片上时, ...
html与css编程证书,利用CSS布局做一个简单的荣誉证书（代码示例）
本篇文章将给大家介绍如何使用css布局制作一个简单的荣誉证书,有趣且实用,希望对需要的朋友有所帮助! 那么利用css布局实现简单荣誉证书样式的效果是非常简单的,主要用到以下几个基础属性: backgr ...

用html+css+jQuery制作一个简单的流程图/步骤图

用html+css+jQuery制作一个简单的流程图/步骤图相关推荐

最新文章

热门文章