Realize the comment barrage effect through positioning

Realize the effect:

The two lines of barrage scroll continuously, and when the barrage carousel is finished, it will automatically return to the initial position

principle:

The function of adding barrage is the realization principle of waterfall flow. To judge the length of two uls, which one is shorter, fill in and add li to it.

The principle of carousel is to add positioning function to ul and change its left value

Above code:

html：

  <div class="box">
    <ul class="one" style="left: 100px;"></ul>
    <ul class="two"></ul>
  </div>

css

    *{
      margin: 0;
      padding: 0;
    }
    .box {
      padding-top: 10px;
      width: 100%;
      height: 100px;
      /* background-color: rgb(99, 51, 51); */
      overflow: hidden;
      position: relative;
      top: 30px;
    }

    ul {
      position: absolute;
      left: -100px;
      height: 20px;
      /* overflow: hidden; */
      display: flex;
    }
    ul::-webkit-scrollbar {display:none}
    .two{
      top: 50px;
    }
    li {
      white-space: nowrap;
      width: 100px;
      height: 30px;
      border-radius: 10px;
      text-align: center;
      margin: 0 20px;
      line-height: 30px;
      display: inline-block;
      background: rgba(0,0,0,0.03);
      padding: 0 10px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .content_text{
      /* display: block; */
      /* background: red; */
      margin-right: 10px;
    }
    .zan{
      width: 16px;
      height: 16px;
      margin-right: 10px;
    }
    .adda{
      display: none;
      color: red;
      position: absolute;
      right: 7px;
    }
    .add{
      position: absolute;
      color: red;
      position: absolute;
      right: 7px;
      opacity: 0;
      z-index: 999;
      animation: danmu 1s;
    }

    @keyframes danmu{
      0% {
        transform: translateY(0px);
        opacity: 0;
        }
        25% {
          transform: translateY(-5px);
          opacity: .7;
        }
        50% {
          transform: translateY(-10px);
          opacity: .8;
        }
        75% {
          transform: translateY(-15px);
          opacity: 1;
        }
        100% {
          transform: translateY(-25px);
          opacity: 0;
        }
    }

 js：

  var list = [
    { title: '你很厉害', zan: 12, }, { title: '灰太狼', zan: 12, }, { title: '红太狼', zan: 12, }, { title: '小灰灰', zan: 12, }, { title: '村长', zan: 12, }, { title: '懒洋洋', zan: 12, }, { title: '喜洋洋', zan: 12, }, { title: '沸羊羊', zan: 12, }, { title: '蕉太狼', zan: 12, }, { title: '暖洋洋', zan: 12, }, { title: '张三丰', zan: 12, }, { title: '王文元', zan: 12, }
  
  ]
  //获取连个url
  var one = document.querySelector('.one')
  var two = document.querySelector('.two')

  for (var i = 0; i < list.length; i++) {
    //创建添加的 li
    var li = document.createElement("li");
    li.innerHTML = `<span class = 'content_text'>${list[i].title}</span>
      <img class= 'zan' src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F02%2F20%2F79%2F59afd3e782a28_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650283239&t=ecb7da287ec124ae72024998368e12fb'><img>
      <span class = 'dian'>1</span>
      <span class = 'adda'>+1</span>`
      //判断两个 ul 的长度
    if (one.scrollWidth > two.scrollWidth) {
      two.appendChild(li);
    } else {
      one.appendChild(li);
    }
  }
  //获取所有的 li
  var lis = document.querySelectorAll('li')
  // 轮播效果
   function anim(){
    var timer = null
    //创建定时器
        timer = setInterval(() => {
          //判断 ul 定位的left值是否比本身大，如果大的话，就证明轮播结束，
          //轮播结束后，将ul 重新定位到 屏幕宽度的 left值，应为若定位到 0 的话，会显得很突兀，没有衔接的感觉。
          if(one.offsetWidth<= -one.offsetLeft){
            console.log(1);
            one.style.left = window.innerWidth+'px'
          }
          if(two.offsetWidth<= -two.offsetLeft){
            console.log(1);
            two.style.left = window.innerWidth+'px'
          }
          // 两个 ul 每 10毫秒增加 1
          one.style.left = `${one.offsetLeft -1}px`
          two.style.left = `${two.offsetLeft -1}px`
        }, 10);
   }
  anim()
  //点赞功能，每次只能点赞一次，更换class 名
  for(let i = 0;i<lis.length;i++){
    lis[i].querySelector('.zan').addEventListener('click',()=>{
      lis[i].querySelector('.adda').className = 'add';
      lis[i].querySelector('.dian').innerHTML = Number(lis[i].querySelector('.dian').innerHTML) + 1
    })
  }
 
 

Finish:

The principle is very simple, that is, using positioning, the timer continuously increases the left value, so that it can achieve the effect of carousel. after carousel ends

Reposition the left position of the two uls.