JS与HTML结合实现流程进度展示条思路详解


Posted in Javascript onSeptember 03, 2017

效果如下:

JS与HTML结合实现流程进度展示条思路详解

一、设计思路

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

【竖线线】

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

【小圆圈】

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

【文字】

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

【动态效果】

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

鼠标移入事件onmouseover=”on_mous_move(‘info_name_1')”

鼠标移出事件onmouseout=”on_mous_out(‘info_name_1')”

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

【注意】

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

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

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

二、实现源码

源码如下,仅供参考:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>一个好看的进度页面</title>
</head>
<body>
<style type="text/css">
  * {
    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%;
  }
</style>
<script type="text/javascript">
  function on_mous_move(name) {
    var info = document.getElementsByName(name)[1];
    var value = info.innerHTML;
    info.innerHTML = " ❤ " + value;
    var div_info = document.getElementsByName(name)[0];
    div_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 div_info = document.getElementsByName(name)[0];
    div_info.style.backgroundColor = "#45a0f3";
  }
</script>
<div class="stepInfo">
  <ul>
    <li></li>
    <li></li>
  </ul>
  <div class="stepIco stepIco1" name="info_name_1">1</div>
  <div class="info info_1" onmouseover="on_mous_move('info_name_1')" onmouseout="on_mous_out('info_name_1')">
    <strong name="info_name_1">打开冰箱</strong>
  </div>
  <div class="stepIco stepIco2" name="info_name_2">2</div>
  <div class="info info_2" onmouseover="on_mous_move('info_name_2')" onmouseout="on_mous_out('info_name_2')">
    <strong name="info_name_2">把大象放进去</strong>
  </div>
  <div class="stepIco stepIco3" name="info_name_3">3</div>
  <div class="info info_3" onmouseover="on_mous_move('info_name_3')" onmouseout="on_mous_out('info_name_3')">
    <strong name="info_name_3">关上冰箱</strong>
  </div>
</div>
</body>
</html>

总结

以上所述是小编给大家介绍的JS与HTML结合实现流程进度展示条,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
js 未结束的字符串常量错误解决方法
Jun 13 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
vue+Element实现搜索关键字高亮功能
May 28 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 #Javascript
JS实现页面内跳转的简单代码
Sep 03 #Javascript
初探JavaScript 面向对象(推荐)
Sep 03 #Javascript
jquery+css实现下拉列表功能
Sep 03 #jQuery
使用JavaScript实现点击循环切换图片效果
Sep 03 #Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 #jQuery
Angular4表单验证代码详解
Sep 03 #Javascript
You might like
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
newxtree.js代码
2007/03/13 Javascript
js form action动态修改方法
2008/11/04 Javascript
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
基于jquery实现三级下拉菜单
2016/05/10 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
js实现全选和全不选功能
2020/07/28 Javascript
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
Python 字符串池化的前提
2020/07/03 Python
浅析Python 序列化与反序列化
2020/08/05 Python
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
父亲生日宴会答谢词
2014/01/10 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
财务部岗位职责
2015/02/03 职场文书
通知函的格式
2015/04/27 职场文书
三十年同学聚会感言
2015/07/30 职场文书
少先队中队工作总结
2015/08/14 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
2021年最新用于图像处理的Python库总结
2021/06/15 Python
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android