JS和HTML相结合实现流程进度显示栏

效果如下：

一、设计思路

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

[垂直线]

这是由ul的列表标签制成的，确保它可以随时添加并垂直排列

[小圆圈]

Html标签似乎不提供小圆圈标签。这里div加弧度角，方形div加弧度等于div的长度(或宽度)，可以实现小圆。磁带更简单，您可以直接向div添加文本

[文本]

要求文字跟随小圆圈，并保持与小圆圈相同的水平高度。这里，位置：绝对；置顶完成同级布局

[动态效果]

不用说，前端的动态效果必须通过Javascript来完成，这里主要设置两个事件，即，

鼠标进入事件onmouseover=" on _ mouses _ move(' info _ name _ 1 ')"

鼠标移出事件onmouseout=" on _ mouses _ out(' info _ name _ 1 ')"

主要逻辑是在文本前后添加两个空格，并删除添加的内容

[注意]

一个空格实际上是6个字符。"对于js，所以在裁剪的时候需要注意。仅此而已。下面是实现的源代码

-

第二，实现源代码

源代码如下，仅供参考：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/title一个好看的进度页面/title/header dystyle type=' text/CSS ' * { margin : 0；padd : 0；列表样式类型：无；} a、img { border : 0；} body { background : # f2f2f2 font : 12px/180% Arial，Helvetica，无衬线'新宋体；} /* stepInfo */.步骤信息{位置：相对；背景# f2f2f2 margin : 80px auto auto 100px高度： 240像素；} .stepInfo ul {/*左侧浮动：*/高度： 100%；宽度： 0.6微米；背景： # 45a 0 F3} .stepIco { /*圆形显示*/边界-半径： 1.4 empadding: 0.2em背景： # 45a 0 F3文本对齐：中心；线高： 1.4 emcolor: # fff绝对位置：宽度： 1.4 emheight: 1.4em}。stepico 1 {左侧：-0.7em；前：-1%；} .stepico 2 {左侧：-0.7em；前：名50%；} .stepico3 {左侧：-0.7em；前：名95%；} .stepText { color: # 666边距-top : 0.2 em；宽度： 4 em文本对齐：中心；左边距-:-1.4em；} .信息{ /*信息布局及颜色*/position:绝对值；字体大小：大号；颜色：黑色；余量0 0 0 25px宽度： 200像素；颜色： # 45a 0 F3} .info _ 1 { top :-1%；} .info _ 2 { top : 50%；} .info _ 3 { top : 95%；}/style脚本类型=' text/JavaScript '函数on _ mous _ move(name){ var info=document。getelementsbyname(name)[1]；定义变量值=info.innerHTMLinfo.innerHTML=' '值；var div _ info=文档。getelementsbyname(名称)[0]；div _ info。风格。背景色=' # 47009 b}函数on _ mous _ out(name){ var info=document。getelementsbyname(name)[1]；定义变量值=info . innerhtml info . innerhtml=value . substr(13，value。长度)；var div _ info=文档。getelementsbyname(名称)[0]；div _ info。风格。background COlOr=' # 45a 0 F3}/script div class=' stepInfo ' ul Li/Li Li/Li/ul div class=' stepIco stepIco 1 ' name=' info _ name _ 1 ' 1/div class=' info _ 1 ' on mouse over=' on _ mous _ move '(info _ name _ 1 ')' on mouse out=' on _ mous _ out '(info _ name _ 1 ')强名称=' info _ name _ 1 '打开冰箱/strong/div class=' stepIco stepIco 2 ' name=' info _ name _ 2 ' 2/div class=' info _ 2 ' on mouse over=' on _ mous _ move '(info _ name _ 2 ')' on mouse out=' on _ mous _ out '(info _ name _ 2 ')'强名称=' info _ name _ 2 '把大象放进去/strong/div class=' stepIco stepIco 3 ' name=' info _ name _ 3 ' 3/div class=' info _ 3 ' on mouse over=' on _ mous _ move '(info _ name _ 3 ')' on mouse out=' on _ mous _ out '(info _ name _ 3 ')'强名称=' info _ name _ 3 '关上冰箱/strong /div/div/body/html总结

以上所述是小编给大家介绍的射流研究…与超文本标记语言结合实现流程进度展示条，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！