流程展示 php,js实现动态的流程进度展示条

这次给大家带来js实现动态的流程进度展示条,js实现动态流程进度展示条的注意事项有哪些,下面就是实战案例,一起来看一下。

一、设计思路

分为以下几步(仅供参考)

【竖线线】

这个采用ul的list标签制作,保证了可随时添加,以及纵向排布

【小圆圈】

html标签好像没有提供小圆圈标签,此处采用,p添加弧度角完成,,正方形的p添加弧度等于p的长(或者宽),就能够实现小圆圈。带子就更简单了,,p里直接添加文字即可

【文字】

文字要求紧跟小圆圈,,且与小圆圈保持同一水平高度,此处采用,position: absolute;设置top完成同一水平高度的布局

【动态效果】

前端的动态效果,不用说肯定由Javascript完成,,此处主要需要设置两个事件即,

鼠标移入事件οnmοuseοver=”on_mous_move(‘info_name_1')”

鼠标移出事件οnmοuseοut=”on_mous_out(‘info_name_1')”

主要逻辑就是给文字前加入❤和前后的两个空格,以及删除加入内容

【注意】

一个空格对于js来说其实是6个字符“ ;”,所以在切割的时候需要注意

。。。。就这么多,下面是实现的源码

--------------------------------------------------------------------------------

二、实现源码

源码如下,仅供参考:/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

一个好看的进度页面

* {

margin: 0;

padding: 0;

list-style-type: none;

}

a, img {

border: 0;

}

body {

background: #f2f2f2;

font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";

}

/* stepInfo */

.stepInfo {

position: relative;

background: #f2f2f2;

margin: 80px auto auto 100px;

height: 240px;

}

.stepInfo ul {

/*float: left;*/

height: 100%;

width: 0.6em;

background: #45a0f3;

}

.stepIco {

/*圆形显示*/

border-radius: 1.4em;

padding: 0.2em;

background: #45a0f3;

text-align: center;

line-height: 1.4em;

color: #fff;

position: absolute;

width: 1.4em;

height: 1.4em;

}

.stepIco1 {

left: -0.7em;

top: -1%;

}

.stepIco2 {

left: -0.7em;

top: 50%;

}

.stepIco3 {

left: -0.7em;

top: 95%;

}

.stepText {

color: #666;

margin-top: 0.2em;

width: 4em;

text-align: center;

margin-left: -1.4em;

}

.info {

/*信息布局及颜色*/

position: absolute;

font-size: large;

color: black;

margin: 0 0 0 25px;

width: 200px;

color: #45a0f3;

}

.info_1 {

top: -1%;

}

.info_2 {

top: 50%;

}

.info_3 {

top: 95%;

}

function on_mous_move(name) {

var info = document.getElementsByName(name)[1];

var value = info.innerHTML;

info.innerHTML = " ❤ " + value;

var p_info = document.getElementsByName(name)[0];

p_info.style.backgroundColor = "#47009b";

}

function on_mous_out(name) {

var info = document.getElementsByName(name)[1];

var value = info.innerHTML;

info.innerHTML = value.substr(13, value.length);

var p_info = document.getElementsByName(name)[0];

p_info.style.backgroundColor = "#45a0f3";

}

1

打开冰箱

2

把大象放进去

3

关上冰箱

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/281669.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【我们一起写框架】C#的AOP框架

原文:【我们一起写框架】C#的AOP框架前言 AOP,大家都是听过的,它是一种面向切面的设计模式。 不过AOP虽然是被称为设计模式,但我们应该很少能看到AOP设计的框架。为什么呢? 因为,AOP单独设计的框架几乎是无法使用的。普…

新浪微博授权认证过程

为什么80%的码农都做不了架构师?>>> 一、授权认证 1、请求用户授权Token URL: https://api.weibo.com/oauth2/authorize HTTP请求方式:GET/POST 请求参数 必选 类型及范围 说明 client_id true string 申请应用时分配的AppKey。 redire…

VisualStudio 使用 FastTunnel 辅助搭建远程调试环境

有时候需要远程调试一些用户问题,期望能使用本机的 Visual Studio 开发环境,调试远程的用户的设备上的应用。这时会遇到的一个问题是如何让本机的 Visual Studio 可以连接上远程的用户的设备,从而进行调试。本文将告诉大家如何采用 FastTunne…

深入理解null的原理

--null的原理 --oracle一直将null和空字符串’’<长度为0>同等对待<如’’ is null是true,’’null为false,如果声明a varchar2:’’,那么a is null为true,a’’为false>--1.null的运算 --算术表达式和null 运算总为null,实际上所有的操作符除了||连接操作符外&…

阻止中文输入法输入拼音的时候触发input事件

阻止中文输入法输入拼音的时候触发input事件 前言 最近看element-ui源码的时候看到el-input发现的。这个少见的事件。 compositionstart、compositionend事件&#xff08;MDN解释) compositionstart事件触发于一段文字的输入之前&#xff08;类似于 keydown 事件&#xff0c;但…

Python1

python介绍python是一种解释型的&#xff0c;面对对象的。带有动态语义的高级程序设计语言python简史1989年,Guido(龟叔)为ABC 语言写的一个插件。因Monty Python的喜剧团体的原因,故给这个语言起名为python。linux也是1989年诞生的,1991年正式发布linux1.0内核;1990年, 发布py…

ncut算法matlab实现,ncut_multiscale_1_6 经典的图像分割算法 的Matlab代码。 238万源代码下载- www.pudn.com...

文件名称: ncut_multiscale_1_6下载收藏√ [5 4 3 2 1 ]开发工具: matlab文件大小: 587 KB上传时间: 2015-04-17下载次数: 4提 供 者: HH详细说明&#xff1a;经典的图像分割算法NCut的Matlab代码。-Matlab code of classic image segmentation algorithm NCut .文件列表(…

使用.NET从零实现基于用户角色的访问权限控制

使用.NET从零实现基于用户角色的访问权限控制本文将介绍如何实现一个基于.NET RBAC 权限管理系统&#xff0c;如果您不想了解原理&#xff0c;可查看推送的另一篇文章关于Sang.AspNetCore.RoleBasedAuthorization[1] 库是使用介绍&#xff0c;直接使用该库即可。背景在设计系统…

数据归一化

数据归一化 数据的标准化是将数据按比例缩放&#xff0c;使之落入一个小的特定区间&#xff0c;一般为0到1之间。在某些比较和评价的指标处理中经常会用到&#xff0c;去除数据的单位限制&#xff0c;将其转化为无量纲的纯数值&#xff0c;便于不同单位或量级的指标能够进行比较…

vi is failed with error E382: Cannot write, 'buftype' option is set in Linux

在linux下生成jar文件遇到了编码问题&#xff0c;于是想vi t.jar&#xff0c;在保存是报错&#xff1a;E382: Cannot write, buftype option is set 解决方法&#xff1a; 可以用下面的命名查看buftype的设置&#xff0c;当buftypenofile时&#xff0c;不能保存文件&#xff0c…

列表生成式的使用

输入&#xff1a;[Hello, World, 18, Apple, None] 输出&#xff1a;[hello, world, apple] L [Hello, World, 18, Apple, None] print([w.lower() for w in L if isinstance(w, str)])# -- coding: utf-8 -- L [Hello, World, 18, Apple, None] L2 [] L2 [w.lower() for w…

matlab 12位 显示不出来,求助大神,为何不同机器运行MATLAB结果不同

求助&#xff1a;不同机器运行MATLAB结果不同我调用MATLAB优化工具箱的库函数fmincon&#xff0c;使用相同的初始解(可行解)&#xff0c;对同一个问题进行局部搜索(算法为序列二次规划&#xff0c;即SQP)&#xff0c;但在不同机器上得到的结果不同。一共有五台机器 (为了方便&a…

.NET性能系列文章一:.NET7的性能改进

这些方法在.NET7 中变得更快照片来自 CHUTTERSNAP[1] 的 Unsplash[2]欢迎阅读.NET 性能系列的第一章。这一系列的特点是对.NET 世界中许多不同的主题进行研究、比较性能。正如标题所说的那样&#xff0c;本章节在于.NET7 中的性能改进。你将看到哪种方法是实现特定功能最快的方…

UVA - 10061 How many zero#39;s and how many digits ?

n!x*b^y, 当x为正整数时,最大的y就是n!末尾0的个数了, 把n,b分别拆成素因子相乘的形式: 比如, n5,b16 n5,b2^4, 非常明显,末尾0的个数为0 10进制时,n!a*10^x b进制时,n!c*b^y 非常明显,n!的位数就是最大的x1 这里计算我用了log,精度设置为1e-9 #include<iostream> #inclu…

丁洪波 -- 不要“ 总是拿着微不足道的成就来骗自己”

都市快报实盘大赛25期&#xff1a;于海飞/丁洪波荣获冠亚军 七禾网 时间&#xff1a;2010-11-02 12:47:05 来源&#xff1a;期货中国10月30日下午&#xff0c;2010年浙商期货实盘大赛第三季度&#xff08;都市快报实盘大赛第25期&#xff09;颁奖典礼在天科大厦浙商期货大会议室…

面试专题(Mysql及Mongodb)

2019独角兽企业重金招聘Python工程师标准>>> mysql面试题 1. 各个数据库存储引擎区别 mysql的存储引擎是针对表进行设置的&#xff0c;一个库的不同表可以设置不同的存储引擎&#xff0c;mysql默认支持多种存储引擎&#xff0c;以适用不同领域的数据库应用需要&…

织梦网站翻页php,dedecms织梦网站列表页和内容页分页样式

织梦分页标签{dede:pagelist istitem"index,pre,next,end,option,info," listsize"5"/}&#xff0c;{dede:prenext getpre/}&#xff0c;{dede:prenext getnext/}。默认样式和使用模板css样式布局不一样,这时又不想重写样式&#xff0c;我们可以修改织梦标…

通过中间件添加用户的Claim

本文主要介绍 Sang.AspNetCore.RoleBasedAuthorization[1] 库如何通过中间件实现对用户 Claim 的添加。背景前面我们介绍了通过对自定义授权策略和自定义授权处理程序的使用实现了基本的RBAC权限设计&#xff0c;将大量的用户可访问资源及操作的标识直接放到用户的 JWT Token 中…

部署也是工程的一部分,也要编程(自动化)

部署和开发一样&#xff0c;同样面临变化。同样有复杂的细节。 同样应该代码化&#xff0c;自动化。把复杂性、思路&#xff0c;操作&#xff0c;都固化下来&#xff0c;显式表达。 不要“雪花”式配置。 把最近看的文章摘抄一下 集句&#xff1a; 1频繁做让你感到痛苦的事情&a…

KDD走进阿里 数百专家聚集探讨产学研一体化

6月29日&#xff0c;由阿里巴巴集团、中国中文信息学会、KDD China联合主办的数据挖掘前沿发展与未来论坛在杭州举行&#xff0c;会议吸引了来自国际顶级高校和知名企业的近300名专家学者到场参会、近30000人在线观看。论坛除了分享最新的数据挖掘领域最新科研成果及研发思路外…