91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

vue如何實現文字上下滾動跑馬燈效果

vue
小億
799
2023-08-07 19:57:12
欄目: 編程語言

要在Vue中實現文字上下滾動的跑馬燈效果,可以使用CSS和Vue的動態綁定來實現。

首先,在Vue組件中定義一個變量來保存要展示的文字內容。然后使用CSS樣式來創建滾動效果。

以下是一個簡單的示例:

<template>

  <div class="marquee-container">

    <div class="marquee" :style="{ top: position + 'px' }">{{ text }}</div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      text: '這是一段要滾動的文字',

      position: 0,

      speed: 2, // 滾動速度,可根據需要調整

      timer: null

    };

  },

  mounted() {

    this.startMarquee();

  },

  beforeDestroy() {

    this.stopMarquee();

  },

  methods: {

    startMarquee() {

      this.timer = setInterval(() => {

        this.position -= this.speed;

        // 當文字完全滾出容器時,重置位置

        const containerHeight = this.$el.offsetHeight;

        const contentHeight = this.$refs.marquee.offsetHeight;

        if (Math.abs(this.position) >= contentHeight) {

          this.position = containerHeight;

        }

      }, 20);

    },

    stopMarquee() {

      clearInterval(this.timer);

    }

  }

};

</script>

<style>

.marquee-container {

  height: 50px; /* 容器高度,可根據需要調整 */

  overflow: hidden;

}

.marquee {

  position: relative;

  transition: top 0.2s linear;

}

</style>

在上面的例子中,使用marquee-container類定義了一個高度固定的容器。在容器內部,使用marquee類來包裹要滾動的文字內容。通過綁定:style屬性,將文字的位置與變量position關聯起來。

在mounted鉤子函數中,調用startMarquee方法來開始滾動效果。在beforeDestroy鉤子函數中,調用stopMarquee方法來停止滾動。

這樣,當組件被渲染時,文字就會以指定的速度從上往下滾動,并且當文字完全滾出容器后,會重新回到容器頂部重新開始滾動。你可以根據需要調整滾動速度、容器高度和其他樣式。


0
桦南县| 广汉市| 吉安市| 伊金霍洛旗| 克什克腾旗| 越西县| 合川市| 延川县| 武清区| 敦煌市| 城固县| 渝中区| 湘西| 新晃| 兴业县| 当涂县| 大丰市| 芒康县| 县级市| 灌云县| 天全县| 怀安县| 沂源县| 称多县| 安吉县| 朝阳市| 宁乡县| 开鲁县| 葫芦岛市| 朔州市| 萨迦县| 日土县| 南乐县| 双牌县| 嘉兴市| 遂宁市| 新化县| 饶河县| 额敏县| 五指山市| 江陵县|