export default {
data() {
return {
animate:false,
items:[
{name:"马云"},
{name:"雷军"},
{name:"王勤"}
]
}
},
created(){
setInterval(this.scroll,1000)
},
methods: {
scroll(){
this.animate=true; // 因为在消息向上滚动的时候需要添加css3过渡动画,所以这里需要设置true
setTimeout(()=>{ // 这里直接使用了es6的箭头函数,省去了处理this指向偏移问题,代码也比之前简化了很多
this.items.push(this.items[0]); // 将数组的第一个元素添加到数组的
this.items.shift(); //删除数组的第一个元素
this.animate=false; // margin-top 为0 的时候取消过渡动画,实现无缝滚动
},500)
}
}
#box{
width: 300px;
height: 32px;
overflow: hidden;
padding-left: 30px;
border: 1px solid black;
}
.anim{
transition: all 0.5s;
margin-top: -30px;
}
#con1 li{
list-style: none;
line-height: 30px;
height: 30px;
}
<div id="box">
<ul id="con1" ref="con1" :class="{anim:animate==true}">
<li v-for='item in items'>{{item.name}}</li>
</ul>
</div>

vue实现消息的无缝滚动效果的更多相关文章

  1. liMarquee演示12种不同的无缝滚动效果

    很实用的一款liMarquee演示12种不同的无缝滚动效果 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="zh-CN"&g ...

  2. js实现简单易用的上下无缝滚动效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 信息无缝滚动效果marquee

    横向滚动.纵向滚动 1. 解决滚动的空白 向左向右滚动的话,可以根据父级定位left,每次加或者减可以使物体向左或右运动,用top也可以实现向上或向下运动 上下滚动实现无缝滚动1. innerHTML ...

  4. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

  5. javascript小例子:實現四方向文本无缝滚动效果

    实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class= ...

  6. jq封装-无缝滚动效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. js 无缝滚动效果学习

    <!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...

  8. jQery无缝滚动效果

    思路: 赋值所有li,添加到ul末尾,重新计算ul宽度 每次移动一个固定的值,当超出一半时,将ul拉回原位 以下代码 <!DOCTYPE html> <html> <he ...

  9. 用js实现图片的无缝滚动效果

    实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...

随机推荐

  1. nginx: [error] open() "/usr/local/var/run/nginx.pid" failed (2: No such file or directory)

    nginx: [error] open() "/usr/local/var/run/nginx.pid" failed (2: No such file or directory) ...

  2. linux配置裸设备

    1.什么裸设备?字符设备?块设备? 裸设备:也叫裸分区(原始分区),是一种没有经过格式化,不被Unix/Linux通过文件系统来读取的特殊字符设备.它由应用程序负责对它进行读写操作.不经过文件系统的缓 ...

  3. 2018 Jar_Feb_Newwords

    检测钩子程序 开发一个检测钩子程序的工具 - 豆丁网http://www.docin.com/p-1363993661.html pdf掺杂病毒的方法 Java的:xml文件中跳过的二进制数据在解析 ...

  4. Haskell语言学习笔记(63)Dicidable

    Dicidable class Divisible f => Decidable f where lose :: (a -> Void) -> f a choose :: (a -& ...

  5. C++ 0x 使用 shared_ptr 自动释放, 防止内存泄漏

    最近在研究 cocos2d-x 3.0 ,它在创建类的对象时比如 Layer 时, 并不是直接使用 new , 而是使用一个宏方法  CREATE_FUNC(MyLayer);. 这个宏就是自动的创建 ...

  6. django中怎么使用mysql数据库的事务

    Mysql数据库事务: 在进行后端业务开始操作修改数据库时,可能会涉及到多张表的数据修改,对这些数据的修改应该是一个整体事务,即要么一起成功,要么一起失败. Django中对于数据库的事务,默认每执行 ...

  7. threading实例

    import paramiko, threading import queue import pymysql class ThreadPool(object): def __init__(self, ...

  8. chrome 调试参数(鼠标事件)

    1.监听鼠标事件: monitorEvents(document.body, 'mouse') 取消监听: unmonitorEvents(document.body) 原文链接: https://b ...

  9. Linux下tar.gz 安装

    将安装文件拷贝至你的目录中 如果是以root身份登录上的,就将软件拷贝至/root中. cp xxx.tar.gz /root 解压缩包 tar xvzf xxx.tar.gz 切换到安装目录下 cd ...

  10. 基于MSAA的QQ界面信息获取的实现

    主要技术(Microsoft Active Accessibility)讲解: 以下是微软对于此技术的说明 Microsoft Active Accessibility Version 2.0 Pur ...