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 router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 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
西德产收音机
2021/03/01 无线电
PHP 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
php计算税后工资的方法
2015/07/28 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
关于递归运算的顺序测试代码
2011/11/30 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
JSONP基础知识详解
2017/03/19 Javascript
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
Python numpy 点数组去重的实例
2018/04/18 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
Python 爬虫性能相关总结
2020/08/03 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
一些Unix笔试题和面试题
2013/01/22 面试题
大学应届毕业生个人求职信
2013/09/23 职场文书
二年级语文教学反思
2014/02/02 职场文书
主要领导对照检查材料
2014/08/26 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
2015年统战工作总结
2015/05/19 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle