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 相关文章推荐
FCK调用方法..
Dec 21 Javascript
JavaScript CSS修改学习第二章 样式
Feb 19 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
JavaScript 反科里化 this [译]
Sep 20 Javascript
div模拟选择框示例代码
Nov 03 Javascript
JsRender实用入门教程
Oct 31 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
js 实现验证码输入框示例详解
Sep 23 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微信支付之APP支付方法
2015/03/04 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
python生成随机图形验证码详解
2017/11/08 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
Python如何实现FTP功能
2020/05/28 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
物业总经理岗位职责
2014/02/28 职场文书
环保项目建议书
2014/08/26 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
大学生读书笔记范文
2015/07/01 职场文书