vue实现可以快进后退的跑马灯组件

本文实例为大家分享了vue开发实现跑马灯效果组件的具体代码,供大家参考,具体内容如下

用vue编写一个可以快进后退的跑马灯组件

由于业务需求,要实现一个会可以控制速度的跑马灯,初开始用js的setinterval每隔几毫秒来减取一个字符拼接到后面,效果不理想就放弃了。后查询用js的animate这个api改造大功告成!

效果图

组件代码

<template>
  <div class="marquee" @mouseover="pause(true)" @mouseleave="pause()">
    <i
      class="marquee-btn btn-left el-icon-d-arrow-left"
      @mousedown="speedUp(true)"
      @mouseup="speedStop()"
    ></i>
    <div ref="marqueeText" class="marquee-text">
      <div v-if="itemClick">
        <span
          v-for="item in text.split(splitSymbol)"
          :key="item"
          @click="$emit('itemClickEvent', item)"
        >{{item + ' 、'}}</span>
      </div>
      <div v-else>{{text}}</div>
    </div>
    <i
      class="marquee-btn btn-right el-icon-d-arrow-right"
      @mousedown="speedUp()"
      @mouseup="speedStop()"
    ></i>
  </div>
</template>

<script>
export default {
  name: "marquee",
  props: {
    text: {
      type: String,
      required: true
    },
    speed: {
      type: Number,
      required: false,
      default: 110
    },
    // 是否每个都可以点击触发事件
    itemClick: {
      type: Boolean,
      required: false,
      default: false
    },
    // 每个触发事件元素的分割符号
    splitSymbol: {
      type: String,
      required: false,
      default: ''
    }
  },
  data() {
    return {
      aniInstance: null,
      speedTimer: null
    };
  },
  methods: {
    setAnimate() {
      const contentWidth = this.$refs.marqueeText.scrollWidth;
      const keyframes = [
        { transform: "translateX(100%)" },
        { transform: `translateX(-${contentWidth}px)` }
      ];
      const animateOptions = {
        duration: (contentWidth / this.speed) * 1000,
        iterations: Infinity,
        easing: "linear"
      };
      this.aniInstance = document.querySelector(".marquee-text").animate(keyframes, animateOptions);
    },
    /**
     * 快进
     * @param { Boolean } isLeft 是否为左方向
     */
    speedUp(isLeft = false) {
      const set = () => {
        if (this.aniInstance.currentTime > 0) {
          this.aniInstance.currentTime = this.aniInstance.currentTime + (isLeft ? 2000 : -2000);
          this.aniInstance.currentTime <= 0 && (this.aniInstance.currentTime = 0);
        }
      }
      // 鼠标单击
      set();
      // 鼠标长按
      this.speedTimer = setInterval(() => {
        set()
      }, 100);
    },
    // 快进停止
    speedStop() {
      clearInterval(this.speedTimer);
      this.speedTimer = null;
    },
    /**
     * 暂停、播放
     * @param { Boolean } isPause 是否暂停
     */
    pause(isPause = false) {
      this.aniInstance[["play", "pause"][Number(isPause)]]();
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.setAnimate();
    });
  }
};
</script>

<style lang="less" scoped>
.marquee {
  position: relative;
  padding: 10px 0;
  overflow: hidden;
  width: 100%;
  font-size: 16px;
  color: #fff;
  background-image: linear-gradient(
    to left,
    #b9565e,
    #cb655a,
    #da7655,
    #e58a50,
    #eb9f4b
  );
  &:hover .marquee-btn {
    opacity: 1;
  }
}
.marquee-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 15px;
  color: #fff;
  background: rgba(1, 1, 1, 0.4);
  z-index: 999;
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s linear;
}
.btn-left {
  left: 0;
}
.btn-right {
  right: 0;
}
.marquee-text {
  white-space: nowrap;
  span {
    &:hover {
      cursor: pointer;
      color: #2c3e50;
    }
  }
}
</style>

父组件代码

<Marquee
  :text="overdueInfo.content"
  :itemClick="true"
  :speed="120"
  splitSymbol="、"
  @itemClickEvent="marqueeSearch"
  class="marquee-box__container"
></Marquee>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Vue实现跑马灯效果

    本文实例为大家分享了Vue实现跑马灯效果的具体代码,供大家参考,具体内容如下 实现的业务逻辑 1.给[嗨起来]按钮,绑定一个点击事件 v-on(@). 2.在按钮的事件函数处理中,写相关的业务逻辑:拿到msg的字符串,后调用字符串中的substring来进行字符串的截取操作,放到最后一个位置. 3.为了实现点击下按钮,自动截取功能,需要将步骤2中代码放到一个定时器中. 实现代码如下: <!DOCTYPE html> <html lang="en"> <he

  • vue实现简单跑马灯效果

    本文实例为大家分享了vue实现简单跑马灯效果的具体代码,供大家参考,具体内容如下 如下图片,会自行向 上"滚动" 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跑马灯 </title> <script src="https://cdn.bootcss.com/

  • vue实现无缝轮播效果(跑马灯)

    本文实例为大家分享了vue实现无缝轮播效果的具体代码,供大家参考,具体内容如下 1.首先创建两个vue组件Sweiper.vue和SweiperItem.vue; 2.将两个组件引入页面,Sweiper.vue中用v-model传参(v-model 其实是语法糖,默认属性value和默认事件input): 代码中我是通过v-model的selcted将值传给Sweiper(子组件),自动轮播时子组件再通过触发input事件将即将显示的值传回给父组件 3.核心是要让selected的值传到Swei

  • Vue 使用计时器实现跑马灯效果的实例代码

    Vue 使用计时器实现跑马灯效果,代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="

  • Js和VUE实现跑马灯效果

    本文实例为大家分享了Js和VUE分别实现跑马灯效果的具体代码,供大家参考,具体内容如下 一.js实现跑马灯 1.效果图 视频上传不了,只能看图片了 2. 设计思路 使用截取字符串的方法,首先获取文本的值,再分别截取文本的第一个字符串和剩余的字符串,然后重新拼接一个新的字符串,最后把这个新字符串赋值给文本,代码如下: var value=cont.innerHTML; var start=value.substring(0,1);//截取第一个字符串 var end=value.substring

  • vue+animation动画实现跑马灯效果

    本文实例为大家分享了vue+animation动画实现跑马灯效果的具体代码,供大家参考,具体内容如下 1.单行显示,每行只显示一条 效果图 上代码 <template>   <div class="container">     <div class="box">       <!-- 假设lists列表有4个项,设置ul的宽度为800%(相对于box),设置li的宽度为12.5%(相对于ul是12.5%:相对于box是10

  • Vue实现跑马灯样式文字横向滚动

    本文实例为大家分享了Vue实现跑马灯样式文字横向滚动的具体代码,供大家参考,具体内容如下 需求: 在Vue项目的顶部,来实现文字左右滚动 步骤: 1.可以自己封装一个组件,也可以自己写,也可以复制以下代码 2.封装完成以后要在所需的组件中引入,注册,并使用 代码: 封装一个专门用来实现跑马灯效果的组件marquee组件 <template> <!-- 跑马灯组件 --> <div class="marquee-wrap" ref="marquee

  • Vue实现简单的跑马灯

    Vue实现滚动字条/跑马灯,供大家参考,具体内容如下 内容不多,直接看代码吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../资料/js/vue.js"></script> <!-- 引入V

  • Vue实现跑马灯简单效果

    本文实例为大家分享了Vue实现跑马灯简单效果的具体代码,供大家参考,具体内容如下 1.跑马灯效果 说明:单击"应援"按钮文字向左飘动,再单击"暂停"按钮停止当前飘动 2.完整代码 (注意:代码中需要引入vue.js文件,这个文件自己根据目录位置引入,具体位置代码中有注释) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q

  • vue实现简单的跑马灯效果

    本文实例为大家分享了vue实现简单跑马灯效果的具体代码,供大家参考,具体内容如下 效果图 代码 html <div id="app"> <button @click="start">开启</button> <button @click="stop">停止</button> <p>{{msg}}</p> </div> vue var app = new

  • Vue3实现跑马灯效果

    本文实例为大家分享了Vue3实现跑马灯效果的具体代码,供大家参考,具体内容如下 先看效果: html部分代码 <div class="app">             <p :class="{tabcolor:color}">{{str}}</p>             <button @click="play">开始</button>             <button

随机推荐