通过定位实现评论弹幕效果

实现效果：

两行弹幕不停滚动，当弹幕轮播完之后，将自动回到初始位置

原理：

弹幕的添加功能就是瀑布流的实现原理，判断两个ul 的长度，谁短，往谁上面填添加 li

轮播的原理就是给ul添加定位功能，改变他的left值

上代码：

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
    })
  }
 
 

结束：

原理很简单，就是利用定位，定时器不间断增加left值，使他能实现轮播的效果。轮播结束后

重新定位两个ul的left位置。