资讯专栏INFORMATION COLUMN

js实现列表循环滚动

3403771864 / 598人阅读

    js实现列表循环滚动如何实现?下面是具体的代码内容:

  知识点:

  clientHeight元素的高度

  clientTop元素顶部边框的宽度

  scrollTop滚动条遮挡的部分的高度(包含border)

  scrollHeight整个内容的高度(包含border)

  offsetTop距离上一个position不为static(默认) 的元素的顶部内边框的距离

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8" />
  <title>列表循环滚动</title>
  </head>
  <style>
  html,
  body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: #999;
  }
  .parent {
  width: 728px;
  margin: 200px auto;
  height: 200px;
  overflow: hidden;
  background-color: #fff;
  }
  </style>
  <body>
  <div id="parent">
  <table border="1" cellpadding="18" cellspacing="0" id="child">
  </table>
  <div id="cloneChild"></div>
  </div>
  <script type="text/javascript">
  let parent = document.getElementById('parent');
  let child = document.getElementById('child');
  let str = '';
  for (let i = 0; i < 10; i++) {
  str += `<tr>`;
  for (let j = 0; j < 6; j++) {
  str += `<td>第${i}行第${j}列</td>`;
  }
  str += `</tr>`
  }
  child.innerHTML = str;
  let cloneChild = document.getElementById('cloneChild');
  // 深度克隆一份表格 相比 innerHTML 的优势在于可以克隆元素的全部的属性
  let cloneNoe = child.cloneNode(true);
  // 追加到 parent 里面 做无缝切换视觉效果
  parent.appendChild(cloneNoe);
  (function () {
  setInterval(function () {
  // parent.scrollTop + parent.clientHeight = child.scrollHeight;
  // child.scrollHeight - parent.scrollTop = parent.clientHeight;
  // 让他多滚动 parent 一显示区域的高度。再跳到 最顶部 ,正好 给人一种在不断滚动的错觉
  if (parent.scrollTop >= child.scrollHeight) {
  parent.scrollTop = 0;
  } else {
  parent.scrollTop++;
  }
  }, 20);
  })()
  </script>
  </body>
  </html>

1.jpg

        上述就是全部内容,请大家多多关注后续更多精彩内容。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/127740.html

相关文章

  • js实现列表自动滚动循环播放

      列表自动滚动循环播放不要太爽,下面看看具体代码:  1.实现效果图  鼠标移入,暂停滚动; 鼠标移出,继续滚动;  2.原理  第一:要实现无缝衔接,在原有ul后面还要有一个一样内容的ul;  第二:在最外层div为可视区域,设overflow:hidden;  第三:2个ul的高度 > 外层可视div高度,才能滚动;  3.实现代码  html:  <!--vue-->  ...

    3403771864 评论0 收藏0
  • jquery特效:无缝向上循环滚动列表

    摘要:效果呈现整个列表间隔设定的时间向上移动一个的高度结构设置时,注意高度是显示多少个如的高度是,显示个,高度则是实现思路获得下第一个元素的高度,对它的或进行一个从有到无的动画变化,代码如下或者改成动画结束后,把它插到最后,形成无缝 效果呈现 整个列表间隔设定的时间向上移动一个item的高度 html结构: title1 title2 ...

    hot_pot_Leo 评论0 收藏0
  • 那些年,前端学习之路的疑难杂症(四):面试中遇到的3个问题概览

    摘要:闭包能用来实现私有化和创建工厂函数等作用。关于闭包的常见面试题是这样的写一个函数,循环一个整数数组,延迟秒打印这个数组中每个元素的索引。 文章来源:http://mp.weixin.qq.com/s/vs0... 前言 在公众号上看到了这篇文章,觉得很有用,有助于理解JS学习中的一些重点难点。决定把它整理下发布出来。该文章主要介绍了JS中的三个问题。在以后的几篇文章里,我会详细介绍这三...

    gecko23 评论0 收藏0
  • vue实现列表无缝循环滚动

      vue如何为大家展示列表无缝循环滚动,以下就是具体代码内容如下:  功能介绍:  在PC端、大数据、官网、后台管理平台开发项目中,时常会要求展示这种列表循环滚动。  大致需求:  1、列表内容可以循环展示;  2、每条内容展示时间间距几秒;  3、可以形成走马灯样式效果;  整体思路:  1、使用两个定时器嵌套实现;  2、需要两个相同容器存放同样内容,实现无缝衔接效果;  效果展示:  &l...

    3403771864 评论0 收藏0

发表评论

0条评论

3403771864

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<