vue实现文字横向无缝走马灯组件效果的实例代码


Posted in Javascript onApril 09, 2019

marquee标签已经废弃了,只能手动实现文字走马灯样式

基于vue组件开发

<template>
 <div class="wrap"> // 外框,固定宽度
  <div id="box"> // 内部滚动框
   <div id="marquee">{{text}}</div> //展示的文字
   <div id="copy"></div> // 文字副本,为了实现无缝滚动
  </div>
  <div id="node">{{text}}</div> //为了获取text实际宽度
 </div>
</template>
<script>
export default {
 name: 'Marquee',
 props: ['lists'], // 父组件传入数据, 数组形式 [ "连雨不知春去","一晴方觉夏深"]
 data () {
  return {
   text: '' // 数组文字转化后的字符串
  }
 },
 methods: {
  move () {
// 获取文字text 的计算后宽度 (由于overflow的存在,直接获取不到,需要独立的node计算)
   let width = document.getElementById('node').getBoundingClientRect().width 
   let box = document.getElementById('box')
   let copy = document.getElementById('copy')
   copy.innerText = this.text // 文字副本填充
   let distance = 0 // 位移距离
//设置位移
   setInterval(function () { 
    distance = distance - 1
 // 如果位移超过文字宽度,则回到起点
    if (-distance >= width) {
     distance = 16
    }
    box.style.transform = 'translateX(' + distance + 'px)'
   }, 20) 
  }
 },
// 把父组件传入的arr转化成字符串
 mounted: function () {
  for (let i = 0; i < this.lists.length; i++) {
   this.text += ' ' + this.lists[i]
  }
 },
// 更新的时候运动
 updated: function () {
  this.move()
 }
}
</script>
<style scoped>
// 限制外框宽度,隐藏多余的部分
.wrap {
 overflow: hidden;
}
// 移动框宽度设置
#box {
 width: 80000%;
}
// 文字一行显示
#box div {
 float: left;
}
// 设置前后间隔
#marquee {
  margin: 0 16px 0 0;
}
// 获取宽度的节点,隐藏掉
#node {
 position: absolute;
 z-index: -999;
 top: -999999px;
}
</style>

父组件引入 import myMarquee from './my-marquee

使用并传参: <my-marquee :lists="lists"></my-marquee>

参数:

data (){
 return {
  lists: [
    '连雨不知春去',
    '一晴方觉夏深'
  ]
 }
}

总结

以上所述是小编给大家介绍的vue实现文字横向无缝走马灯组件效果的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
详解vue 命名视图
Aug 14 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
Angular脚手架开发的实现步骤
Apr 09 #Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 #Javascript
javascript实现手动点赞效果
Apr 09 #Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 #Javascript
浅谈Vue.js组件(二)
Apr 09 #Javascript
4 种滚动吸顶实现方式的比较
Apr 09 #Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 #Javascript
You might like
PHP基础知识回顾
2012/08/16 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
vue v-model的用法解析
2020/10/19 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
在python中画正态分布图像的实例
2019/07/08 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
注塑工厂厂长岗位职责
2013/12/02 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
英语教师求职信范文
2015/03/20 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android