当前位置：网站首页>JS table auto cycle scrolling, mouse move in pause

JS table auto cycle scrolling, mouse move in pause

2022-07-26 09:38:00 【Bean sprouts don't eat beans】

Look at the company project code (react), I think it's very common , I'll use it myself js I wrote it demo.( Basically source code , I don't know which God I refer to , therefore … Invasion and deletion .)

Put it here for a while Easy to use directly in the future ~~

effect : Automatically slide up , Once the mouse goes in, pause and slide .( Moving graph … No hahahaha )
Put code Direct operation :

<!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; } /* Automatically adjust the distance of each column */ /*.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> Serial number </span>
    <span> full name </span>
    <span> Age </span>
    <span> height </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); } //  Real data   launch ajax Request to operate slide1 Of Dom That's all right.  . . . </script>
</body>
</html>
原网站

版权声明
本文为[Bean sprouts don't eat beans]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/207/202207260930004345.html

边栏推荐

猜你喜欢

随机推荐