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 相关文章推荐
jQuery代码优化之基本事件
Nov 01 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
详解如何在angular2中获取节点
Nov 23 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
微信小程序聊天功能的示例代码
Jan 13 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 Javascript
vue使用echarts实现折线图
Mar 21 Vue.js
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封装分页函数实现文本分页和数字分页
2014/10/23 PHP
Laravel日志用法详解
2016/10/09 PHP
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
2017/05/11 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
layui动态绑定事件的方法
2019/09/20 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
[06:42]DOTA2每周TOP10 精彩击杀集锦vol.1
2014/06/25 DOTA
Python正则表达式介绍
2012/08/06 Python
Python实现excel转sqlite的方法
2017/07/17 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
python定时关机小脚本
2018/06/20 Python
python 常用的基础函数
2018/07/10 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
Python类如何定义私有变量
2020/02/03 Python
python 画图 图例自由定义方式
2020/04/17 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
模具毕业生推荐信
2014/02/15 职场文书
厕所文明标语
2014/06/11 职场文书
企业精神口号
2014/06/11 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
项目合作意向书
2015/05/08 职场文书
追悼会答谢词范文
2015/09/29 职场文书
高一军训口号
2015/12/25 职场文书