web端--跑马灯向上滚动

实现效果:

跑马灯向上滚动

html部分:

<div class="top-notice">
  <img class="horn" src="./recharge-activity/notice.png" alt="">
  <div class="slider" id="slider">
    <ul class="swiper_box">
      <li style="display:flex;" v-for="(item,i) in newswiperArr" :key=i>
        <div class="user-name">{{item.name}}</div>
        <div class="got">draws</div>
        <div class="reward-name">{{item.reward}}</div>
      </li>
     </ul>
   </div>
</div>

css部分:

样式自行定义即可

(但需要设置 .swiper_box:position: relative;否者不会有滚动效果)

js部分:

playSwiper() {
 this.setSwipe = setInterval(() => {
 // 内页跑马灯逻辑
 $('#slider ul').animate({
  top: -14 // 这是根据.slider的样式高度来决定
  }, 500, ()=> {
  $('#slider ul li:first-child').appendTo('#slider ul');
  $('#slider ul').css('top', '');
  this.indexNum++;
  if(this.indexNum === this.newswiperArr.length){
     // newswiperArr是需要轮播的数组
     // indexNum===newswiperArr.length时,再重新轮播
     this.indexNum = 0;
    }
  });
 }, 4000);
}

实现原理:

$('#slider ul').animate({}) 是用来执行CSS属性动画的一种方式，适用于动态调整DOM元素的样式。通过这种方式，可以轻松创建平滑的过渡效果，增加用户界面的互动性和视觉吸引力。