JS+CSS 实现表格的轮播

失落の泪

已于 2022-11-02 16:51:50 修改

阅读量714

点赞数

文章标签： javascript css html

于 2022-11-02 16:46:35 首次发布

本文链接：https://blog.csdn.net/qq_44881588/article/details/127654449

版权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>autoScroll</title>
</head>
<style>
  .parent {
    width: 300px;
    height: 200px;
    margin: 0 auto;
    background: #242424;
    overflow-y: scroll;
  }

  /*设置的子盒子高度大于父盒子，产生溢出效果*/
  .child {
    height: auto;
  }

  .child li {
    height: 50px;
    margin: 2px 0;
    background: #009678;
  }
</style>

<body>
  <div id="parent" class="parent">
    <div id="child1" class="child">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </div>
    <div id="child2" class="child"></div>
  </div>
  <script type="text/javascript">
    (function () {
      var parent = document.getElementById('parent');
      var child1 = document.getElementById('child1');
      var child2 = document.getElementById('child2');
      child2.innerHTML = child1.innerHTML;
      setInterval(function () {
        if (parent.scrollTop >= child1.scrollHeight) {
          parent.scrollTop = 0;
        } else {
          let item = parent.scrollTop;
          parent.scrollTop++;
          if (item == parent.scrollTop) {
            parent.scrollTop = 0;
          }
        }
      }, 20);
    })()
  </script>
</body>

</html>

实现表格等overflow:scroll 情况下的循环轮播

vue 样例实现表格的自动循环轮播以及鼠标移上去的轮播停止

<template>
  <div class="topoCaltable" :style="{ width: '100%', height: '100%' }">
    <div class="screen_right_bottom_top">告警信息列表</div>
    <div class="table_content">
      <div class="backround">
        <div class="toptitle">
          <div class="item">设备编号</div>
          <div class="item">报警时间</div>
          <div class="item">状态</div>
          <div class="item">产品名称</div>
        </div>
        <div
          class="warning_parent"
          @mouseover="handlemouseOver"
          @mouseleave="handlemouseLeave"
        >
          <table cellpadding="0" cellspacing="0" class="table_warning">
            <tr
              v-for="(item, index) in warnList"
              :key="index"
              class="table-item"
            >
              <td class="table-item-content">{{ item.devaddr }}</td>
              <td class="table-item-content">
                {{ utc2beijing(item.createdAt) }}
              </td>
              <td class="table-item-content">
                <el-tag
                  v-if="item.content.alertstatus"
                  size="medium"
                  type="warning"
                >
                  告警产生
                </el-tag>
                <el-tag v-else size="medium" type="success">告警恢复</el-tag>
              </td>
              <td class="table-item-content">{{ item.productname }}</td>
            </tr>
          </table>
        </div>
        <!-- </vue-seamless-scroll> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TopoCaltable",
  props: {
    comp: {
      type: Object,
      default: () => ({
        type: "line",
        width: 400,
        hieght: 72,
      }),
    },
  },
  data() {
    return {
      listData: [],
      warnList: [],
      timer: {},
    };
  },
  created() {
  },
  mounted() {
    this.scroll();
  },
  methods: {
    scroll() {
      let _this = this;
      var parent = document.getElementsByClassName("warning_parent")[0];
      var child1 = document.getElementsByClassName("table_warning")[0];
      clearInterval(this.timer);
      this.timer[_this.comp.id] = setInterval(function () {
        // console.log("滚动", parent.scrollTop, child1.scrollHeight);
        if (parent.scrollTop >= child1.scrollHeight) {
          parent.scrollTop = 0;
        } else {
          let item = parent.scrollTop;
          parent.scrollTop++;
          if (item == parent.scrollTop) {
            parent.scrollTop = 0;
          }
        }
      }, 20);
    },
    handlemouseOver() {
      clearInterval(this.timer[this.comp.id]);
    },
    handlemouseLeave() {
      this.scroll();
    },
  },
};
</script>
<style scoped>
/*里面的代码可以根据自己需求去进行更改*/
/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 12px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #0e1024;
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
/* ::-webkit-scrollbar-thumb:window-inactive {
background-color: #2472ea;
} */
</style>
<style lang="scss" scoped>
.topoCaltable {
  background: url("../../../assets/bg/bg_warning.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .screen_right_bottom_top {
    background: url("../../../assets/bg/bg_title.png") no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding-left: 50px;
    font-weight: bold;
    color: #fff;
  }
  .table_content {
    // position: absolute;
    width: 96%;
    height: calc(100% - 50px);
    margin-top: 2px;
    margin-left: 2%;
    background-color: #0b2266;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    overflow: hidden;
    ::v-deep .toptitle {
      background-color: #071753;
      width: 100%;
      display: flex;
      // background-color: gainsboro;
      // margin-bottom: 10px;
      border: 0.2px solid #fff;
      // background-color: transparent;
      // color: white;
    }
    .item {
      width: 25%;
      padding: 15px 0;
      // border-right: 2px solid gainsboro;
      text-align: center;
    }
    .backround {
      width: 100%;
      height: 100%;
      // background-color: #001833;
    }
    .warning_parent {
      height: calc(100% - 50px);
      display: flex;
      overflow-y: scroll;
    }
    .table_warning {
      height: 80%;
      width: 101.8%;
      display: flex;
      // overflow-y: auto;
      flex-direction: column;
      // border-left: 0.2px solid #ccc;
      // border-bottom: 0.2px solid #ccc;
      // border-right: 0.2px solid #ccc;
      .table-item:nth-child(2n) {
        background-color: #0b1b57;
      }
      .table-item:nth-child(2n + 1) {
        background-color: #071753;
      }
      .table-item {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        // border-bottom: 0.1px solid #ccc;
        // border-top: 0.1px solid #ccc;
        width: 100%;
        // border-bottom: 0.2px solid #fff;
        .table-item-content {
          flex: 1;
          height: 100%;
          // border: 0.1px solid #fff;
          text-align: center;
          padding: 5px;
        }
      }
    }

    /* 表格内背景颜色 */

    ::v-deep .el-table .tableRowClassName:nth-child(2n) {
      background-color: #001833 !important;
      // border: 0.1px solid #fff !important;
    }
    ::v-deep .el-table .tableRowClassName:nth-child(2n + 1) {
      background-color: #08223f !important;
      // border: 0.1px solid #fff !important;
    }
    ::v-deep .el-table {
      border-collapse: collapse;
    }

    // ::v-deep .el-table th,
    // // ::v-deep .el-table tr,
    // ::v-deep .el-table td {
    //   border-collapse: collapse;
    //   color: #fff !important;
    //   // border: 0.2px solid #fff !important;
    //   // border-collapse: collapse !important;
    // }

    // 原文链接：https://blog.csdn.net/weixin_47769562/article/details/119945415
    .seamless-warp {
      overflow: hidden;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-perspective: 1000;
      -moz-perspective: 1000;
      -ms-perspective: 1000;
      perspective: 1000; /* Other transform properties here */
    }

    // ::v-deep .el-table--enable-row-hover .el-table__body tr:hover {
    //   color: #000 !important;
    // }
    // ::v-deep .el-table .tableRowClassName:hover {
    //   color: #000 !important;
    // }
    ::v-deep .el-table .cell {
      text-align: center;
      color: #fff;
    }
  }
}
</style>