h5+css+js实现通知消息滚动条纯原生h5利用css动画效果和js实现：横向通知消息滚动条纯原生h5利用css动画

h5+css+js实现通知消息滚动条

最近想写一个通知消息滚动条，想了一下，可以利用css动画效果和js实现。具体的思路：

第一条消息向左滚动的时候，第二条消息也要跟上，看起来才流畅，也不至于太空，所以可以做两个div并列同时向左滚动100%；
待第一条滚动完到看不见的时候，也就是播放完了第一条消息，此时第二条就刚好到页面中间，这个时间弄一个定时器更换消息数组的顺序，把第一条消息放到数组最后，第二条消息顶替第一条消息成为下一个滚动到看不见的，就可以实现衔接了。
循环滚动

思路想好了就开始着手写：

html部分：

<div class="bg">
    <div id="box" class="scroll_box">
      <!-- 滚动的两行 -->
      <div id="t1" class="text text_scroll"></div>
      <div id="t2" class="text text_scroll"></div>
      <!-- 后一行---看不见 -->
      <div id="t3" class="text"></div>
    </div>
  </div>

css样式：

<style>
    body {
      margin: 0;
      padding: 0;
    }

    .scroll_box {
      position: relative;
      width: 100vw;
      height: 6.9vw;
      background: sandybrown;
      display: flex;
      justify-content: start;
      align-items: center;
      overflow: hidden;
    }

    @keyframes toLeft {
      0% {
        right: 0;
      }

      100% {
        right: 100%;
      }
    }

    @-webkit-keyframes toLeft

    /* Safari and Chrome */
      {
      0% {
        right: 0;
      }

      100% {
        right: 100%;
      }
    }

    .text {
      min-width: 100vw;
      text-align: center;
      position: relative;
      font-size: 2.7vw;
      color: #fff9df;
      line-height: 3.7vw;
      flex-shrink: 0;
    }

    .text_scroll {
      animation: toLeft 5s linear infinite;
      -webkit-animation: toLeft 5s linear infinite;
      /* Safari and Chrome */
    }
  </style>

js部分：

  var scrollList = "永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹，又有清流激湍，映带左右，引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。是日也，天朗气清，惠风和畅。仰观宇宙之大，俯察品类之盛，所以游目骋怀，足以极视听之娱，信可乐也。夫人之相与，俯仰一世。或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外。虽趣舍万殊，静躁不同，当其欣于所遇，暂得于己，快然自足，不知老之将至；及其所之既倦，情随事迁，感慨系之矣。向之所欣，俯仰之间，已为陈迹，犹不能不以之兴怀，况修短随化，终期于尽！古人云：“死生亦大矣。”岂不痛哉！每览昔人兴感之由，若合一契，未尝不临文嗟悼，不能喻之于怀。固知一死生为虚诞，齐彭殇为妄作。后之视今，亦犹今之视昔，悲夫！故列叙时人，录其所述，虽世殊事异，所以兴怀，其致一也。后之览者，亦将有感于斯文。".split('。')
  var box = document.getElementById('box')
  var t1 = document.getElementById('t1')
  var t2 = document.getElementById('t2')
  var t3 = document.getElementById('t3')

  // 给第一行 第二行 第三行设置文字内容
  var setText = function () {
    for (let i = 0; i < scrollList.length; i++) {
      t1.innerText = scrollList[0] + '。'
      t2.innerText = scrollList[1] + '。'
      t3.innerText = scrollList[2] + '。'
    }
  }
  setText()

  // 五秒 更换第一行 第二行 第三行文字内容
  var setDanMuSrcoll = function () {
    timer = setInterval(() => {
      // 将第一行拼接到数组最后
      scrollList.push(scrollList[0])
      // 删掉第一行
      scrollList.shift()
      // 重新设置文字内容
      setText()
    }, 5000)
  }
  setDanMuSrcoll()

注：因为css样式滚动完一条的时间是5s，所以定时5s更换一次数组顺序，需要更换时间的话这两个都要换成一样的，不然就衔接不上了。

另外因为设置了定时器，离开页面的时候，需要销毁定时器：

window.onbeforeunload = function () {
    clearInterval(timer)
  }

小菜叽记录笔记1✔