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


Posted in Vue.js onApril 08, 2022

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

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

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

效果图

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

组件代码

<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>

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

Vue.js 相关文章推荐
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
Axios代理配置及封装响应拦截处理方式
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 #Vue.js
vue实现拖拽交换位置
Apr 07 #Vue.js
Vue.Draggable实现交换位置
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
vue cli4中mockjs在dev环境和build环境的配置详情
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 #Vue.js
You might like
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
python复制文件的方法实例详解
2015/05/22 Python
在Python中marshal对象序列化的相关知识
2015/07/01 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
优秀员工自荐书
2013/12/19 职场文书
护理专业自荐书
2014/06/04 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
金榜题名主持词
2015/07/02 职场文书
SQL Server中的游标介绍
2022/05/20 SQL Server