当前位置：网站首页>js 表格自动循环滚动,鼠标移入暂停

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

2022-07-26 09:30:00 【豆芽不吃豆】

看公司项目代码(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>
原网站

版权声明
本文为[豆芽不吃豆]所创，转载请带上原文链接，感谢
https://blog.csdn.net/lucky569/article/details/109314328

边栏推荐

猜你喜欢

随机推荐