Vue替代marquee标签超出宽度文字横向滚动效果


Posted in Javascript onDecember 09, 2019

一、npm 安装

如果你想安装插件(自己写的)

安装

# install dependencies
npm i marquee-components

使用

在main.js引入

import marquee from 'marquee-components'
Vue.use(marquee );

在页面使用

<template>
 <div id="app">
    <marquee :val="msg"></marquee>
 </div>
</template>
<script>
export default {
 name: 'app',
 data () {
  return {
   msg: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue'
  }
 }
}
</script>

val后加文字即可,当超过文本容器长度时,触动横向滚动效果。

二、直接引入组件

marquee组件

<template>
 <div class="marquee-wrap">
  <div class="scroll">
   <p class="marquee">{{text}}</p>
   <p class="copy"></p>
  </div>
  <p class="getWidth">{{text}}</p>
 </div>
</template>

<script>
export default {
 name: 'marquee',
 props: ['val'],
 data () {
  return {
   timer: null,
   text: ''
  }
 },
 created () {
  let timer = setTimeout(() => {
   this.move()
   clearTimeout(timer)
  }, 1000)
 },
 mounted () {
  for (let item of this.val) {
   this.text += ' ' + item
  }
 },
 methods: {
  move () {
   let maxWidth = document.querySelector('.marquee-wrap').clientWidth
   let width = document.querySelector('.getWidth').scrollWidth
   if (width <= maxWidth) return
   let scroll = document.querySelector('.scroll')
   let copy = document.querySelector('.copy')
   copy.innerText = this.text
   let distance = 0 
   this.timer = setInterval(() => {
    distance -= 1
    if (-distance >= width) {
     distance = 16
    }
    scroll.style.transform = 'translateX(' + distance + 'px)'
   }, 20)
  }
 },
 beforeDestroy () {
  clearInterval(this.timer)
 }
}
</script>

<style scoped>
 .marquee-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
 }
 .marquee{
  margin-right: 16px;
 }
 p {
  word-break:keep-all;
  white-space: nowrap;
  font-size: 16px;
  font-family: "微软雅黑 Light";
 }
 .scroll {
  display: flex;
 }
 .getWidth {
  word-break:keep-all;
  white-space:nowrap;
  position: absolute;
  opacity: 0;
  top: 0;
 }
</style>

其他页面引入marquee组件

<template>
 <div class="container">
    <marquee :val="title"></marquee>
 </div>
</template>
<script>
import marquee from './marquee'
 name: 'index',
 components: {
  marquee
 },
 data () {
  return {
 title: ''
  }
 },
</script>

总结

以上所述是小编给大家介绍的Vue替代marquee标签超出宽度文字横向滚动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
一个简单的jQuery插件制作 学习过程及实例
Apr 25 Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
javascript 判断中文字符长度的函数代码
Aug 27 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 #Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 #Javascript
简述Vue中容易被忽视的知识点
Dec 09 #Javascript
vue路由传参三种基本方式详解
Dec 09 #Javascript
vue使用nprogress实现进度条
Dec 09 #Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 #Javascript
vue vant Area组件使用详解
Dec 09 #Javascript
You might like
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
php实现递归的三种基本方式
2020/07/04 PHP
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
再谈JavaScript线程
2015/07/10 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
原生js仿浏览器滚动条效果
2017/03/02 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
python opencv之分水岭算法示例
2018/02/24 Python
python计算n的阶乘的方法代码
2019/10/25 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
python中os.remove()用法及注意事项
2021/01/31 Python
服装设计专业毕业生推荐信
2013/11/09 职场文书
计算机专业毕业生求职信分享
2013/12/24 职场文书
风险评估实施方案
2014/03/09 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
关于读书的活动方案
2014/08/14 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
基层党建工作简报
2015/07/21 职场文书
音乐研修感悟
2015/11/18 职场文书