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 EasyUI的formatter格式化函数代码
Jan 12 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
Jul 07 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
vue 请求后台数据的实例代码
Jun 22 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
JavaScript实现区块链
Mar 14 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
vue点击标签切换选中及互相排斥操作
Jul 17 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 Javascript
vue递归实现树形组件
Jul 15 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对二维数组按指定键值key排序示例代码
2013/11/26 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
详解Django框架中的视图级缓存
2015/07/23 Python
用Python写冒泡排序代码
2016/04/12 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
HTML5的新特性(1)
2016/03/03 HTML / CSS
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
区优秀教师事迹材料
2014/02/10 职场文书
学生会招新策划书
2014/02/14 职场文书
企业文化建设实施方案
2014/03/22 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP