js 表格自动循环滚动,鼠标移入暂停

86 阅读 0 评论 57 点赞

我是靠谱客的博主傻傻钢笔，最近开发中收集的这篇文章主要介绍js 表格自动循环滚动,鼠标移入暂停，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

看公司项目代码(react),觉得很常用,我就自己用js写了一下demo.(基本还是源代码,我不知道参考的是哪个大神的,所以…侵删.)

放在这里一下以后方便直接用~~

效果:自动向上滑动,鼠标一进去暂停滑动.(动图…没有哈哈哈哈哈)
放代码可直接运行:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>table-scroll.</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .list-box{
      width: 500px;
      height: 500px;
      margin:0 auto;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      position: relative;
      border: 1px solid darkgrey;
    }
    .title-row{
      height: 38px;
      background-color: rgba(13,142,167,.23);
      color: #6aa4f5;
      border-bottom: none;
    }
    .row{
      display: flex;
      flex-direction: row;
      /*justify-content: flex-start;*/
      justify-content: space-around;
      align-items: center;
      height: 50px;
      color: #6aa4f5;
      /*text-align: center;*/
      border-bottom: 1px solid rgba(51, 101, 125, .8);
    }

    .list-box .row span{
      text-align: center;
      justify-content: space-around;
    }
    /*自动调节各列距离*/
    /*.list-box .row span:nth-child(1) {*/
    /*   flex: 1;*/
    /* }*/
    /*.list-box .row span:nth-child(2) {*/
    /*   flex: 4;*/
    /* }*/
    /*.list-box .row span:nth-child(3) {*/
    /*   flex: 2;*/
    /* }*/
    /*.list-box .row span:nth-child(4) {*/
    /*   flex: 1;*/
    /* }*/

    .list-box-items{
      /*flex: 1;*/
      position: absolute;
      overflow: hidden;
      width: 100%;
      height: 450px;
      top: 50px;
    }
  </style>
</head>
<body>
<div class="list-box">
  <div class="title-row row">
    <span>序号</span>
    <span>姓名</span>
    <span>年龄</span>
    <span>身高</span>
  </div>
  <div class="list-box-items" id="slide">
    <div class="list-box-items-inner" id="slide1">
      <div class="row">
        <span>111</span>
        <span>22222</span>
        <span>33333333</span>
        <span>4444444444</span>
      </div>
      <div class="row">
        <span>111</span>
        <span>22222</span>
        <span>33333333</span>
        <span>4444444444</span>
      </div>
      <div class="row">
        <span>111</span>
        <span>22222</span>
        <span>33333333</span>
        <span>4444444444</span>
      </div>
      <div class="row">
        <span>111</span>
        <span>22222</span>
        <span>33333333</span>
        <span>4444444444</span>
      </div>  <div class="row">
      <span>111</span>
      <span>22222</span>
      <span>33333333</span>
      <span>4444444444</span>
    </div>
      <div class="row">
        <span>111</span>
        <span>22222</span>
        <span>33333333</span>
        <span>4444444444</span>
      </div>
      <div class="row">
        <span>111</span>
        <span>22222</span>
        <span>33333333</span>
        <span>4444444444</span>
      </div>
      <div class="row">
      <span>111</span>
      <span>22222</span>
      <span>33333333</span>
      <span>4444444444</span>
      </div>
    </div>
    <div id='slide2'  class="list-box-items-inner">
    </div>
  </div>
</div>

<script>
  var speed = 80;
  var slide = document.getElementById('slide');
  var slide2 = document.getElementById('slide2');
  slide2.innerHTML=slide1.innerHTML; 
  function Marquee() {
    if(slide2.offsetTop-slide.scrollTop<=0)
      slide.scrollTop-=slide1.offsetHeight
    else{
      slide.scrollTop++
    }
  }

  var MyMar = setInterval(Marquee,speed);

  slide.onmouseover = function () {
    clearInterval(MyMar);
  }
  slide.onmouseout = function () {
    MyMar = setInterval(Marquee,speed);
  }
// 真实数据的话 发起ajax请求去操作slide1的Dom就可以了
.
.
.

</script>
</body>
</html>