CSS + JS 实现内容无限垂直滚动

最新推荐文章于 2023-08-21 14:00:00 发布

UserGuan

最新推荐文章于 2023-08-21 14:00:00 发布

阅读量660

点赞数

分类专栏：前端类文章标签： javascript html css

本文链接：https://blog.csdn.net/AdminGuan/article/details/124974351

版权

前端类专栏收录该内容

50 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>CSS + JS 实现内容无限垂直滚动</title>
    <style type="text/css">
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      .list {
        position: relative;
        width: 300px;
        height: 200px;
        overflow: hidden;
        margin: 20px auto;
        border: 1px solid #999;
      }

      .rowup:hover {
        animation-play-state: paused;
      }
    </style>
  </head>
  <body>
    <div class="list">
      <div class="cc"></div>
    </div>
    <script>
      function init() {
        let data = '塞下秋来风景异，衡阳雁去无留意。四面边声连角起，千嶂里，长烟落日孤城闭。浊酒一杯家万里，燕然未勒归无计。', // 样例数据
          data_len = data.length,
          len = parseInt(Math.random() * 6) + 6, // 数据的长度
          html = '<div class="ss">';
        for (let i = 0; i < len; i++) {
          const start = parseInt(Math.random() * (data_len - 20)),
            s = parseInt(Math.random() * data_len);
          html += `<div class="item">${i+1} - ${data.substr(start, s)}</div>`;
        }
        html += '</div>';
        document.querySelector('.list .cc').innerHTML = html + html; // 复制一份数据
        const height = document.querySelector('.list .ss').offsetHeight; // 一份数据的高度
        addKeyFrames('-' + height + 'px', '10s'); // 设置keyframes属性
        document.querySelector('.list .cc').className += ' rowup'; // 添加rowup样式
      }
      init();
      /* 设置keyframes属性 */
      function addKeyFrames(val, ms) {
        let style = document.createElement('style');
        style.type = 'text/css';
        let keyFrames = `
					.rowup {
						position: relative;
						animation: ${ms} anime linear infinite normal;
						-webkit-animation: ${ms} anime linear infinite normal;
					}
					@keyframes anime {
						0% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); }
						100% { transform: translate3d(0, ${val}, 0); -webkit-transform: translate3d(0, ${val}, 0); }
					}
					@-webkit-keyframes anime {
						0% { transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); }
						100% { transform: translate3d(0, ${val}, 0); -webkit-transform: translate3d(0, ${val}, 0); }
					}`;
        style.innerHTML = keyFrames;
        document.getElementsByTagName('head')[0].appendChild(style);
      }
    </script>
  </body>
</html>

UserGuan

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS + JS 实现内容无限垂直滚动

<!DOCTYPE html><html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS + JS 实现内容无限垂直滚动</title> <style type="text/css"> body { display: fl.
复制链接

扫一扫