jquery实现步骤流程线条悬浮浮起效果代码-html代码-BFW代码库

jquery实现步骤流程线条悬浮浮起效果代码

代码语言：html

所属分类：进度条

代码描述：jquery实现步骤流程线条悬浮浮起效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title> </title>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

    <style>
        body {
          background: #d33144;
        }
        
        .process {
          width: 800px;
          margin: 3em auto;
          cursor: default;
        }
        
        .process-items {
          display: table;
          margin: 0 0 10px;
          padding: 0;
          list-style-type: none;
          color: #fff;
          font-size: 18px;
          text-align: center;
        }
        .process-items li {
          display: table-cell;
          width: 25%;
          vertical-align: bottom;
          padding: 0 .5em;
          -webkit-transform: scale(0.65) translateY(40px);
                  transform: scale(0.65) translateY(40px);
          -webkit-transform-origin: bottom center;
                  transform-origin: bottom center;
          transition: -webkit-transform .5s;
          transition: transform .5s;
          transition: transform .5s, -webkit-transform .5s;
        }
        .process-items li.active {
          -webkit-transform: scale(1) translateY(0);
                  transform: scale(1) translateY(0);
        }
        .process-items em {
          display: block;
          margin-top: .5em;
        }
    </style>
</head>

<body>
    <div class="process">
        <ol class="process-items">
            <li class="active">第一步 1
                <em>just do it</em></li>
            <li>第二步 2
                <em>yesterday you said tomorrow</em></li>
            <li>第三步 3
                <em>just do it</em></li>
            <li>第四步 4
                <em>make your dreams come true</em></li>
        </ol>
        <canvas id="canvas" width="800" height="55"></canvas>
    </div>

    <script>
        var process = $('.process');
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        
        var SECTION_WIDTH = 200;
        
        var sections = [];
        var create = function(start) {
          var section = {
            start: start,
            width: SECTION_WIDTH,
            height: 45,
            hMax: 35,
            hMod: 0,
            progress: 0,
            dot: {
              x: 0,
              y: 0
            }
          };
          section.end = section.start + section.width;
          section.dot.x = section.start + section.width/2;
          se.........完整代码请登录后点击上方下载按钮下载查看