jQuery 표 줄 데이터 스크롤 효과 구현

본 논문 의 사례 는 jQuery 가 표 줄 데이터 스크롤 효 과 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
HTML 코드:

<div class="box">
  <div class="box-header">
    <div class="col">  1</div>
    <div class="col">  2</div>
    <div class="col">  3</div>
    <div class="col">  4</div>
  </div>
  <div id="font-scroll">
    <div class="box-body">
      <div class="row">
        <div class="col">    </div>
        <div class="col">    </div>
        <div class="col">    </div>
        <div class="col">    </div>
      </div>
      <div class="row">
        <div class="col">    </div>
        <div class="col">    </div>
        <div class="col">    </div>
        <div class="col">    </div>
      </div>
      <div class="row">
        <div class="col">    </div>
        <div class="col">    </div>
        <div class="col">    </div>
        <div class="col">    </div>
      </div>
      <div class="row">
        <div class="col">    </div>
        <div class="col">    </div>
        <div class="col">    </div>
        <div class="col">    </div>
      </div>
      <div class="row">
        <div class="col">    </div>
        <div class="col">    </div>
        <div class="col">    </div>
        <div class="col">    </div>
      </div>
      <div class="row">
        <div class="col">    </div>
        <div class="col">    </div>
        <div class="col">    </div>
        <div class="col">    </div>
      </div>
      <div class="row">
        <div class="col">    </div>
        <div class="col">    </div>
        <div class="col">    </div>
        <div class="col">    </div>
      </div>
      <div class="row">
        <div class="col">    </div>
        <div class="col">    </div>
        <div class="col">    </div>
        <div class="col">    </div>
      </div>
      <div class="row">
        <div class="col">    </div>
        <div class="col">    </div>
        <div class="col">    </div>
        <div class="col">    </div>
      </div>
    </div>
  </div>
</div>

CSS 스타일 코드:

.box {
      width: 400px;
      text-align: center;
      font-size: 14px;
      border: 1px solid rgba(0, 0, 0, .3);
    }

    .box .box-header {
      display: flex;
      justify-content: space-evenly;
    }

    .box-body .row {
      display: flex;
      justify-content: space-evenly;
    }

    .box-header,
    .box-body .row {
      border-bottom: 1px dashed #404040;
    }

    .box .col {
      padding: 10px 0 10px 0;
    }

    .box .col:nth-child(1) {
      width: 80px;
    }

    .box .col:nth-child(2) {
      width: 60px;
    }

    .box .col:nth-child(3) {
      width: 80px;
    }

    .box .col:nth-child(4) {
      width: 60px;
    }

    /*      */

    #font-scroll {
      /*          */
      height: 199px;
      overflow: hidden;
    }

JS 코드:

(function ($) {
  $.fn.FontScroll = function (options) {
    let d = { time: 1000 }
    $.extend(d, options);

    //      div   
    let box = this[0]
    //     
    let _time = d.time

    //                     
    // //        （          ）
    // let _contentChildHeight = box.children[0].children[0].offsetHeight
    // //      ，       （        ）
    // let _contentTotalHeight = _contentChildHeight * box.children[0].children.length

    //           ，                
    //        
    let all_row_el = box.children[0].children
    //     
    let _contentTotalHeight = 0
    //                   
    let _contentChildHeight = []
    for (let i in all_row_el) {
      if ((new RegExp("^\\d+$")).test(i)) {
        _itemHeight = all_row_el[i].offsetHeight
        _contentTotalHeight += _itemHeight
        i == 0 ? _contentChildHeight.push(_itemHeight) : _contentChildHeight.push(_contentChildHeight[i - 1] + _itemHeight)
      }
    }

    //      div   
    let child1 = this.children('.box-body')
    //        div   
    //      
    // let child1 = this.children('.box-body')[0]
    // let child2 = this.children('.box-body')[1]
    // child2.innerHTML = child1.innerHTML
    //      
    if ((box.offsetHeight + 5) < _contentTotalHeight) {
      //              ，         
      child1.clone().insertAfter(child1)
      /*     */
      let timer = setInterval(autoScrollLine, 30)
      /*        */
      function autoScrollLine() {
        /*            ，             0
             30      1px*/
        if (box.scrollTop >= _contentTotalHeight) {
          box.scrollTop = 0;
        } else {
          box.scrollTop++;
        }
        /*                     ，
          _time                     */
        if (_contentChildHeight.indexOf(box.scrollTop) >= 0) {
          clearInterval(timer)
          setTimeout(() => {
            timer = setInterval(autoScrollLine, 30)
          }, _time)
        }
      }
    }
  }
})(jQuery);

사용 방법:

$('#font-scroll').FontScroll({ time: 1000 });

효과 그림:

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.