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

最新推荐文章于 2023-04-11 11:11:25 发布
最新推荐文章于 2023-04-11 11:11:25 发布
阅读量1.7k 收藏 4
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lucky569/article/details/109314328
版权

看公司项目代码(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>
豆芽不吃豆
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript如何实现暂停功能
11-25
本文实例讲述了JS实现的自定义网页拖动类。分享给大家供大家参考，具体如下： Javascript本身没有暂停功能（sleep不能使用）同时 vbscript也不能使用doEvents，故编写此函数实现此功能。 javascript作为弱对象语言，一个函数也可以作为一个对象使用。 比如： 　　function Test(){ 　　 alert("hellow"); 　　 this.NextStep=function(){ 　　 alert("NextStep"); 　　 } 　　} 我们可以这样调用 var myTest=new Test();myTest.NextStep(); 
js实现table数据不断滚动
zyj12138的博客
12-10 2149
上一次的项目没想出来，这一次，我想出来了！而且十分容易理解，就是有点麻烦，日后会想更简便的方法： 首先获取table的dom： var table1 = document.getElementsByClassName('tableContent')[0]; var table2 = document.getElementsByClassName('tableContent')[1]...
js实现table自动滚动
weixin_30445169的博客
07-15 3498
<div style="height:400px" :class="{anim:animate==true}" @mouseenter="mouseenter" @mouseleave="mouseleave"> <el-table :data="tableData" border style="width: 100%;margin-top: 15px;height:38...
javascript表格隔行变色加鼠标移入移出及点击效果的方法
10-24
主要介绍了javascript表格隔行变色加鼠标移入移出及点击效果的方法,涉及javascript实现隔行变色及鼠标点击效果的相关技巧,非常具有实用价值,需要的朋友可以参考下
video.js实现鼠标移入播放鼠标移出暂停
12-31
video.js实现鼠标移入播放鼠标移出暂停
js 无缝滚动，鼠标放上去暂停代码
12-02
js 无缝滚动，鼠标放上去暂停代码，供大家学习和程序中使用
js实现表格自动滚动效果（鼠标悬浮在表格上 暂停滚动，鼠标移开继续滚动）
qq_44162778的博客
08-08 2267
js实现表格自动滚动效果（鼠标悬浮在表格上 暂停滚动，鼠标移开继续滚动）
js实现表格自动滚动，鼠标放上去后停止滚动且可手动滚动
m0_50441807的博客
05-25 4911
scrollTop可以控制滚动的距离，可以设置一个永久定时器setInterval，每次执行定时器让scrollTop++，即可达到滚动的效果； 下面先理解js的几个属性：scrollHeight，offsetHeight，scrollTop，clientHeight
用js实现table内容从下到上连续滚动
petrel_921的博客
04-11 1171
用js实现table内容从下到上连续滚动 网上有很多用ul实现新闻列表滚动的例子，但是很少有直接用table实现列表内容滚动的例子，而Marquee标签滚动的效果不是很好，于是就自己写了一个，提供给攻城师朋友们参考 实现思路：由于table包含标题和内容，实际上理想的效果是标题不动，内容滚动，于是把标题和内容拆分出来放在两个table中 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> &lt
JS 原生 仿WPS 实现某一快区域 滚动效果 （鼠标点击整体滚动/ 鼠标滑动整体移动）
weixin_55042716的博客
09-27 724
1.模仿WPS 顶部需求。鼠标点击左侧或者右侧按钮，整体区域移动。 2. 鼠标按下，整体区域向左移动
原生js实现表格循环滚动
01-22
本文实例为大家分享了js实现表格循环滚动的具体代码，供大家参考，具体内容如下 css table{width: 500px;border: 1px solid gray;border-collapse: collapse;} th,td{line-height: 35px;border: 1px solid gray;text-align: center;width: 120px;} .scroll-box{height: 280px;width: 500px;overflow: hidden;position: relative;} .tab-scroll{position: absolu
实现表格动态滚动效果
05-04
通过CSS+Javascript实现类似表格的动态滚动效果，用ul和li标签模拟表格，文件包括实现源码。
基于JS的文章按行向上滚动,鼠标经过时停止（间接性）
08-17
使用js来控制的单行文字不断向上滚动,无间隙，当鼠标点击时，就自动停止滚动，适合公告以及信息公示使用
左右滚动，一次走一个，鼠标放上去就会停止滚动，离开就会重新开始运动
10-25
图片左右滚动，一次走一个，鼠标放上去就会停止滚动，离开就会重新开始运动
react-list：通用的无限滚动React组件
02-23
ReactList 一个通用的无限滚动组件。 安装 bower install react-list # or npm install react-list ReactList取决于React。 例子 请查看和，以获取不同配置的示例。 这是另一个让您入门的简单示例。 import loadAccount from 'my-account-loader' ; import React from 'react' ; import ReactList from 'react-list' ; class MyComponent extends React . Component { state = { accounts : [ ] } ; componentWillMount ( ) { loadAccounts ( :: this . handleAccoun
js实现自动轮播图选项卡效果（光标移入暂停）.pdf
12-16
js实现自动轮播图选项卡效果（光标移入暂停）
逐行向上滚动js代码，鼠标移上停止滚动,不满一屏的时候不滚动
08-30
逐行向上滚动js代码，鼠标移上停止滚动,不满一屏的时候不滚动
JS实现的新闻列表自动滚动效果示例
10-17
主要介绍了JS实现的新闻列表自动滚动效果,涉及javascript基于时间函数的页面元素属性动态变换相关操作技巧,需要的朋友可以参考下
Rain Water Algorithm雨水优化算法附matlab代码.zip
最新发布
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
写一个前端图片横向无限循环滚动，鼠标移入暂停，移出暂停结束
05-31
{ shi = 0; } if(mode == 0) //如果是正常模式 { Out_Char(4, shi); } else //如果是闹钟设置模式 可以使用 CSS3 的动画来实现这个效果，具体步骤如下： 1. 创建一个容器元 { Out_Char(4, alarm_hour); //显示设置的闹钟时间 } } if(mode == 素，将要滚动的图片都放到容器内。 2. 使用 CSS3 的 `animation` 属性实现动画0) //如果是正常模式 { Out_Char(7, fen); } else //如果是，设置动画时间、动画类型、循环次数等参数。 3. 在 `@keyframes` 中定义动画闹钟设置模式 { Out_Char(7, alarm_min); //显示设置的闹钟时间 } 的关键帧，包括起始状态和结束状态。 4. 通过 JavaScript 监听鼠标移入和移出事件 } if(mode == 0) //如果是正常模式 { Out_Char(10, miao); } else //如果是闹钟设置模式 { Out_Char(10, alarm_sec); //显示设置的，当鼠标移入时暂停动画，当鼠标移出时恢复动画。 下面是一个简单闹钟时间 } //检查是否到达闹钟时间 if(mode == 0 && shi == alarm_hour的实现代码： HTML： ```html <div id="container"> <img src="image1.jpg"> <img src=" && fen == alarm_min && miao == alarm_sec) { //到达闹钟时间，发出警报 //image2.jpg"> <img src="image3.jpg"> <img src="image4.jpg"> <img src="image5这里可以添加蜂鸣器等外部设备的控制代码 } } }

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值