jquery一天24小时时间拖放安排表效果代码-html代码-BFW代码库

jquery一天24小时时间拖放安排表效果代码

代码语言：html

所属分类：拖放

代码描述：jquery一天24小时时间拖放安排表效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          background: #1d1e20;
          box-sizing: border-box;
          padding-top: 150px;
          padding-bottom: 50px;
          font-family: arial;
          min-width: 960px;
        }
        
        .intro {
          font-size: 30px;
          position: absolute;
          top: 60px;
          left: 140px;
          color: #fff;
        }
        .intro span {
          font-size: 15px;
          color: #00ffd4;
        }
        
        ul {
          user-select: none;
        }
        ul .name {
          width: 85px;
          height: 20px;
          line-height: 20px;
          text-align: right;
          padding-right: 5px;
          margin-right: 5px;
          margin-left: 10px;
          box-sizing: border-box;
          color: #ffffff;
          float: left;
          cursor: default;
          font-size: 12px;
          background: transparent;
          border: 0;
          outline: 0;
          transition: 0.3s;
          border-radius: 2px;
        }
        ul input:hover {
          background: #333333 !important;
          cursor: auto !important;
        }
        
        .timeline {
          width: 100%;
          height: 20px;
          margin-bottom: 14px;
        }
        .timeline li {
          display: block;
          float: left;
          width: 27px;
          height: 20px;
          background: #fd3e81;
          color: #ffffff;
          font-size: 12px;
          text-align: center;
          line-height: 20px;
          margin-right: 3px;
          user-select: none;
          cursor: default;
          border-radius: 2px;
        }
        
        .thing {
          width: 100%;
          height: 20px;
          margin-bottom: 4px;
          animation: load 0.5s ease-in;
        }
        .thing li {
          display: block;
          float: left;
          width: 7px;
          height: 20px;
          background: #333333;
          text-align: center;
          margin-right: 0px;
          border-right: 3px solid #1d1e20;
          cursor: pointer;
          border-radius: 0px;
          transition: 0.3s;
        }
        .thing li:hover {
          opacity: 0.5;
        }
        .thing .remove {
          color: #ffffff;
          font-size: 12px;
          height: 20px;
          line-height: 20px;
          cursor: pointer;
          padding: 0 10px;
          margin-left: 5px;
          background: #fd3e81;
          display: block;
          float: left;
          border-radius: 2px;
          opacity: 0.2;
          transition: 0.3s;
          user-select: none;
        }
        .thing .remove:hover {
          opacity: 1;
        }
        
        @keyframes load {
          from {
            opacity: 0;
          }
        }
        .template {
          display: none;
        }
        
        .addThing {
          color: #ffffff;
          font-size: 12px;
          width: 716px;
          transition: 0.3s;
          margin-left: 100px;
          text-align: center;
          border-radius: 2px;
          height: 30px;
          line-height: 30px;
          margin-top: 15px;
          cursor: pointer;
        }
        .addThing:hover {
          background: #333333;
        }
    </style>


</head>

<body >
    <h1 class="intro">
        Design my day
        <span>by joacimnilsson.se</span>
    </h1>
    <ul class="timeline">
        <div class="name">Hours</div>
        <li>00</li>
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
        <li>06</li>
        <li>07</li>
        <li>08</li>
        <li>09</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
    </ul>
    <ul class="thing template">
        <input type="text" class="name" value="Example">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <l.........完整代码请登录后点击上方下载按钮下载查看