使用jQuery怎么實(shí)現(xiàn)一個(gè)時(shí)光軸效果

發(fā)布時(shí)間：2021-04-12 16:49:09 來(lái)源：億速云閱讀：180 作者：Leah 欄目：web開(kāi)發(fā)
本篇文章為大家展示了使用jQuery怎么實(shí)現(xiàn)一個(gè)時(shí)光軸效果，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。
具體如下：
<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <title>timeLine</title>
  <style>
    body{
      margin: 0;
      padding: 0;
      background: #e8ffe8;
    }
    #head, #content, #footer{
      width: 1000px;
      margin: 0 auto;
    }
    #head{
      text-align: center;
      height: 100px;
      line-height: 100px;
    }
    #footer{
      clear: both;
      text-align: center;
      height: 30px;
      line-height: 30px;
    }
    /*-----大標(biāo)題-----*/
    .bigElement{
      clear: both;
      position: relative;
    }
    .bigTitle{
      font-size: 16px;
      font-weight: bold;
      height: 70px;
      line-height: 70px;
      background: #e8ffe8;
      color: #635d5a;
    }
    .bigAction, .bigInfo{
      float: left;
    }
    .bigAction{
      border-right: 3px solid #635d5a;
      text-align: right;
      width: 220px;
    }
    .bigButtonSeeMore{
      float: right;
      width: 70px;
      height: 70px;
      text-align: center;
    }
    .bigButtonSeeMore > a{
      text-decoration: none;
      display: block;
      color: #635d5a;
      outline: none;
      blr: expression(this.onFocus=this.blur());
    }
    .bigButtonSeeMore > a:hover{
      color: #8cdbff;
    }
    .bigContent{
      clear: both;
    }
    /*-----大標(biāo)題end-----*/
    /*-----小標(biāo)題-----*/
    .smallElement{
      clear: both;
      position: relative;
      height: auto;
      font-size: 16px;
      background: #e8ffe8;
      color: #635d5a;
    }
    .smallTitle{
      text-align: right;
      width: 220px;
    }
    .smallTitle, .smallContent{
      float: left;
    }
    .smallContent{
      border-left: 3px solid #635d5a;
    }
    .smallInfo{
      margin-top: 20px;
      text-indent: 40px;
    }
    /*-----小標(biāo)題end-----*/
    /*-----三角形-----*/
    .bigTitleTrifonIconR{
      border-color: #e8ffe8 #e8ffe8 #e8ffe8 #635d5a;
      border-style: solid;
      border-width: 7px;
      width: 0;
      height: 0;
      font-size: 0;
      position: absolute;
      top: 28px;
      left: 223px;
    }
    .smallTitleTrifonIconL{
      border-color: #e8ffe8 #635d5a #e8ffe8 #e8ffe8;
      border-style: solid;
      border-width: 6px;
      width: 0;
      height: 0;
      font-size: 0;
      position: absolute;
      top: 23px;
      left: 208px;
    }
    /*模板*/
    .hide{
      display: none;
    }
    /*查看更多*/
    .showMore{
      clear: both;
      text-align: center;
      height: 70px;
      line-height: 70px;
    }
    .showMore:hover{
      cursor: pointer;
      background: #FFEFDB;
      color: #8cdbff;
    }
  </style>
</head>
<body>
  <div id='head'>
    <span>訂單小助手:</span>
    <input type='text' id='txtDoccode' />
  </div>
  <div id='content'>
    <div class='timeLine'></div>
    <div class='showMore'>查看更多</div>
  </div>
  <div id='footer'>footer</div>
  <!-- 大標(biāo)題模板 -->
  <div class='hide' id='bigTitleTpl'>
    <div class='bigElement'>
      <div class='bigTitle'>
        <div class='bigAction'>{bigAction}  </div>
        <div class='bigInfo'>  {bigInfo}</div>
        <div class='bigButtonSeeMore'><a href='javascript:;'>-</a></div>
      </div>
      <div class='bigTitleTrifonIconR'> </div>
      <div class='bigContent'></div>
    </div>
  </div>
  <!-- 詳細(xì)信息模板 -->
  <div class='hide' id='bigContentTpl'>
    <div class='smallElement'>
      <div class='smallTitle'>
        <div class='smallTime'><br/>{smallTime}  </div>
      </div>
      <div class='smallTitleTrifonIconL'> </div>
      <div class='smallContent'>
        <div class='smallAction'><br/>  {smallAction}</div>
        <div class='smallInfo'>  {smallInfo}</div>
      </div>
    </div>
  </div>
  <script src="http://libs.baidu.com/jquery/1.8.0/jquery.js"></script>
  <script>
    var index = 0;
    $(function(){
      hqOrderNodeCreate();//總部下單
    })
    //總部下單
    function hqOrderNodeCreate(){
      var bigTitleData = {
        bigAction: '總部下單',
        bigInfo: ''
      };
      createBigTitle(bigTitleData, index);
    }
    //基地生產(chǎn)
    function baseOrderNodeCreate(){
      var bigTitleData = {
        bigAction: '基地生產(chǎn)',
        bigInfo: ''
      };
      createBigTitle(bigTitleData, index);
    }
    //倉(cāng)庫(kù)庫(kù)存
    function stockNodeCreate(){
      var bigTitleData = {
        bigAction: '倉(cāng)庫(kù)庫(kù)存',
        bigInfo: ''
      };
      createBigTitle(bigTitleData, index);
    }
    //發(fā)貨
    function delNodeCreate(){
      var bigTitleData = {
        bigAction: '發(fā)貨',
        bigInfo: ''
      };
      createBigTitle(bigTitleData, index);
    }
    //結(jié)算
    function setNodeCreate(){
      var bigTitleData = {
        bigAction: '結(jié)算',
        bigInfo: ''
      };
      createBigTitle(bigTitleData, index);
    }
    //生成大標(biāo)題,一次生成一個(gè)
    function createBigTitle(bigTitleData, index){
      //生成大標(biāo)題
      $('.timeLine').append($('#bigTitleTpl').html()
        .replace('{bigAction}', bigTitleData.bigAction)
        .replace('{bigInfo}', bigTitleData.bigInfo)
      );
      //生成大標(biāo)題下對(duì)應(yīng)的內(nèi)容
      var bigContentData = [{
        smallTime: '2010.10.11',
        smallAction: '錄單 ' + index,
        smallInfo: '操作時(shí)間: 10:30:55'
      },{
        smallTime: '2010.10.15',
        smallAction: '審核 ' + index,
        smallInfo: '操作時(shí)間: 10:10:55'
      },{
        smallTime: '2010.10.15',
        smallAction: '分發(fā) ' + index,
        smallInfo: '操作時(shí)間: 10:10:55'
      }];
      var bigContentTplStr = $('#bigContentTpl').html();
      var str = '';
      for(var i=0; i< bigContentData.length; i++){
        str += bigContentTplStr.replace('{smallTime}', bigContentData[i].smallTime)
          .replace('{smallAction}', bigContentData[i].smallAction)
          .replace('{smallInfo}', bigContentData[i].smallInfo);
      }
      $('.bigContent:eq(' + index + ')').html(str).hide().slideDown(500);
    }
    //查看更多, 每次點(diǎn)擊生成一個(gè)新的節(jié)點(diǎn)
    $('.showMore').on('click', function(){
      if($(this).text() === '查看更多'){
        if(index === 0){
          index++;
          baseOrderNodeCreate();//基地生產(chǎn)
        }
        else if(index === 1){
          index++;
          stockNodeCreate();//倉(cāng)庫(kù)庫(kù)存
        }
        else if(index === 2){
          index++;
          delNodeCreate();//發(fā)貨
        }
        else if(index === 3){
          index++;
          setNodeCreate();//結(jié)算
          $(this).text(' →_→ 沒(méi)有記錄了');
        }
      }
    })
    // + - 按鈕 收縮效果
    $(document).on('click', '.bigButtonSeeMore', function(){
      var clickObj = $(this);
      var bigContentObj = clickObj.parent().next().next();
      if(clickObj.text() === '+'){
        bigContentObj.slideDown(500, function(){
          clickObj.html('<a href="javascript:;" rel="external nofollow" rel="external nofollow" ">-</a>');//切換圖標(biāo)
        });
      }
      else if(clickObj.text() === '-'){
        bigContentObj.slideUp(500, function(){
          clickObj.html('<a href="javascript:;" rel="external nofollow" rel="external nofollow" ">+</a>');
        });
      }
    })
  </script>
</body>
</html>
上述內(nèi)容就是使用jQuery怎么實(shí)現(xiàn)一個(gè)時(shí)光軸效果，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。
向AI問(wèn)一下細(xì)節(jié)
使用jQuery怎么實(shí)現(xiàn)一個(gè)時(shí)光軸效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽
