vue3 页面跑马灯效果

效果图 marquee标签是HTML标签中创建文字滚动的标签。

<marquee
  direction="left"
  behavior="scroll"
  scrollamount="5"
  scrolldelay="10"
  align="top"
  height="40"
  width="100%"
  hspace="1"
  vspace="8"
  οnmοuseοver="this.stop()"
  οnmοuseοut="this.start()">
  {{ name }}
</marquee>

参数解释：

direction表示滚动的方向，值可以是left，right，up，down，默认为left

behavior表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（往返滚动）

loop表示循环的次数，值是正整数，默认为无限循环

scrollamount表示运动速度，值是正整数，默认为6

scrolldelay表示停顿时间，值是正整数，默认为0，单位似乎是毫秒

align表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle

bgcolor表示运动区域的背景色，值是16进制的RGB颜色，默认为白色

height、width表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100% height为标签内元素的高度

hspace、vspace表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。

οnmοuseοver=this.stop() οnmοuseοut=this.start()表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。

完整实列代码如下

<template>
  <div class="card-tips">
    <div class="card-item">
      <!--      <vue3-seamless-scroll :list="dataList " :class-option="optionSingleHeightTime" :limitScrollNum="3" :hover="true" class="seamless-warp">-->
      <!--        <span>{{ dataList.tips }}</span>-->
      <!--      </vue3-seamless-scroll>-->
      <marquee
        direction="left"
        behavior="scroll"
        scrollamount="5"
        scrolldelay="10"
        align="top"
        height="40"
        width="100%"
        hspace="1"
        vspace="8"
        οnmοuseοver="this.stop()"
        οnmοuseοut="this.start()">
        {{ name }}
      </marquee>
    </div>

  </div>
</template>

<script setup lang="ts">

import { $message } from "@mars/components/mars-ui"
import { onMounted, onUnmounted, ref } from "vue"
import { getEnterTips } from "@mars/common/api/jsyApi/gis"

const name = ref("")

// 加载数据
const onSearch = async () => {
  const {
    code,
    data,
    message
  } = await getEnterTips({ key: "qxyzt" })
  if (code === 200) {
    name.value = data.tips
  } else {
    $message(message)
  }
}


onMounted(() => {
  onSearch()
})

onUnmounted(() => {
  // 销毁操作
})


</script>

<style lang="less" scoped>
.card-tips {
  position: absolute;
  top: 10px;
  left: 600px;
  right: 600px;
  //bottom: 30px;
  //width: 428px;
  height: 40px;
  z-index: 1;
  //background: rgba(5, 28, 50, 0.5);
  background: rgba(5, 28, 50, 0);

  .card-item {
    height: 40px;
    background: linear-gradient(-90deg, #0287C5 0%, rgba(2, 135, 197, 0) 100%);
    //display: flex;
    //align-items: center;
    //justify-content: center;
    //color: #eff64a;
  }

}
</style>