vue文字走马灯

最新推荐文章于 2025-11-17 18:29:53 发布

原创最新推荐文章于 2025-11-17 18:29:53 发布 · 491 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css #javascript

html

  <div class="air-box flex flex-items-center">
          <i class="tip-icon"></i>
          <div class="warper">  <!-- 容器 -->
          <ul class="group-list" :style="`animation-duration: ${slider.length * 30}s;`">  <!-- 内容区容器 -->
            <li  v-for="(item, index) in slider" :key="index">
              <span class="text-tip">{{ item.text }}</span>
              <span class="p-time">2024-06-16 14:22:00</span>
            </li>   <!-- 内容A -->
            <li  v-for="(item, index) in slider" :key="index+'copy'">
              <span class="text-tip">{{ item.text }}</span>
              <span class="p-time">2024-06-16 14:22:00</span>
            </li>  <!-- 内容B -->
          </ul>
        </div>
      </div>

js内容

let slider = ref([
  { text: '高楼村上空一小时内将有大到暴雨，请通知相关用户及时调整飞行路线' },
  { text: '受极端天气影响,顺义后岭上村物流通道将于今日13:00开始关闭' },
  { text: '受极端天气影响，后岭上村亦庄物流通道已关闭' }
])

css

.air-box {
  position: fixed;
  top: 90px;
  right: 430px;
  min-width: 800px;
  height: 46px;
  line-height: 46px;
  /* height: 30px;
  line-height: 30px;
  padding:0 10px; */
  /* min-width:300px;
  background:rgba(0,0,0,0.5);
  border: 1px solid #fa4141;
  border-radius: 5px; */
  background: url('@/assets/imgs/flight/weater-icon.png') no-repeat;
  background-size: 100% 100%;
  text-align: center;
}
.tip-icon {
  width: 24px;
  height: 24px;
  background: url('@/assets/imgs/flight/weater-warn-icon.png') no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  vertical-align: middle;
  margin-left: 80px;
  margin-right: 10px;
}
.tip-sy {
  width: 24px;
  height: 24px;
  background: url('@/assets/imgs/flight/syb.png') no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}
.tip-syk {
  width: 24px;
  height: 24px;
  background: url('@/assets/imgs/flight/syk.png') no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}
.p-time {
  color: #fff;
  font-size: 14px;
  //float:right;
  margin-left: 16px;
}
.text-tip {
  color: #fad141;
  margin-left: 6px;
  font-size: 14px;
}
.warper {
  width: 580px; //容器定宽高
  height: 100%;
  line-height: 100%;
  margin: 0;
  font-size: 18px;
  line-height: 30px;
  color: #E9B65F;
  overflow: hidden; //超出内容隐藏
  .group-list {
    padding: 0;
    margin: 0;
    height: 100%;
    align-items: center;
    display: flex;
    align-items: center;
    width: fit-content; // Q1
    white-space: nowrap; // 内容不换行
    animation-name: seamless-scrolling; // Q3
    animation-timing-function: linear; // 动画速度曲线，匀速
    animation-iteration-count: infinite; // 动画循环无限次播放
    li {
      display: inline-block;
      margin-right: 30px;
    }
  }
}

@keyframes seamless-scrolling {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(-50%); //Q2
  }
}