公告栏文本横向循环滚动

wel_coder

已于 2022-05-08 22:25:16 修改

阅读量1.3k

点赞数 1

分类专栏： js 文章标签： js css html5

于 2022-04-04 17:36:34 首次发布

本文链接：https://blog.csdn.net/weixin_42230222/article/details/123956832

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1 效果展示

在这里插入图片描述

2 动画实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .wrap{
      padding: 20px;
      height: 30px;
      line-height: 30px;
      display: flex;
      background-color: pink;
      align-items: center;
    }
    .wrap .tip{
      font-weight: 700;
      font-size: 16px;
    }
    .wrap .content{
      flex: 1;
      height: 100%;
      border: 1px solid #888;
      font-size: 14px;
      overflow: hidden;
    }
    .wrap .content .text{
      /* 必须设置为行内块元素，让元素宽度自动撑开 */
      display: inline-block;
      padding-left: 100%;
      white-space: nowrap;
      animation: autoScroll 15s linear infinite;
    }
    @keyframes autoScroll{
      0%{
        transform: translateX(0);
      }
      100%{
        transform: translateX(-100%);
      }
    }
  </style>
</head>
<body>
  <div class="wrap">
    <span class="tip">公告：</span>
    <div class="content">
      <span class="text">
        （一）理论学习情况；
        （二）贯彻执行党的路线、方针、政策、国家法律法规的情况；
        （三）贯彻执行民主集中制的情况；
        （四）履行岗位职责的情况(在工作中采取的方法措施、成绩和经验)；
        （五）存在问题及今后努力方向。
      </span>
    </div>
  </div>
</body>
</html>

3 js实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .wrap{
      padding: 20px;
      height: 30px;
      line-height: 30px;
      display: flex;
      background-color: pink;
      align-items: center;
    }
    .wrap .tip{
      font-weight: 700;
      font-size: 16px;
    }
    .wrap .content{
      flex: 1;
      height: 100%;
      border: 1px solid #888;
      font-size: 14px;
      overflow: hidden;
    }
    .wrap .content .text{
      padding-left: 100%;
      padding-right: 100%;
      white-space: nowrap;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <span class="tip">公告：</span>
    <div class="content">
      <span class="text">
        （一）理论学习情况；
        （二）贯彻执行党的路线、方针、政策、国家法律法规的情况；
        （三）贯彻执行民主集中制的情况；
        （四）履行岗位职责的情况(在工作中采取的方法措施、成绩和经验)；
        （五）存在问题及今后努力方向。
      </span>
    </div>
  </div>
  <script>
    const content = document.querySelector('.content')
    const text = document.querySelector('.text')
    console.log(content.clientWidth, content.scrollWidth, text.offsetWidth)
    setInterval(() => {
      content.scrollLeft++
      if(content.clientWidth + content.scrollLeft >= /*content.scrollWidth*/text.offsetWidth){
        content.scrollLeft = 0
      }
    }, 20);
  </script>
</body>
</html>