vue实现广告栏上下滚动效果


Posted in Vue.js onNovember 26, 2020

本文实例为大家分享了vue实现广告栏上下滚动效果的具体代码,供大家参考,具体内容如下

html部分

<div class="roll">
 <img src="xxx.jpg" alt />
 <ul :class="{marquee_top:animate}">
  <li v-for="(item, index) in msg" :key="index">
   <span class="txtWrap">
    <span class="txt">{{item.name}}抢得商品{{item.goods}}</span>
    <span class="txt">已有123人申请</span>
   </span>
  </li>
 </ul>
</div>

js部分

data () {
 return {
 msg: [
    {
     name: '张**',
     goods: '牙膏'
    },
    {
     name: '王**',
     goods: '牙刷'
    },
    {
     name: '钟**',
     goods: '肥皂'
    }
   ],
  animate: false,
  setInTime:'' // 定时器
 }
 },
mounted:{
 this.setInTime = setInterval(this.showMarquee, 3000)
},
destroyed () {
  clearInterval(this.setInTime) // 页面销毁时清除定时器
 },
methods:{
 // 滚动栏滚动
  showMarquee () {
   this.animate = true
   setTimeout(() => {
    this.msg.push(this.msg[0])
    this.msg.shift()
    this.animate = false
   }, 500)
  },
}

关键css部分

.marquee_top {
    transition: all 0.5s;
    margin-top: -26px; /* 容器高度 */
 }

效果:

vue实现广告栏上下滚动效果

(图中有个地方直接改变内容的为gif图片首尾相接部分)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
vue实现表格合并功能
Dec 01 Vue.js
详解Vue中的自定义指令
Dec 07 Vue.js
vue使用element-ui实现表单验证
Dec 13 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
Vue组件生命周期运行原理解析
Nov 25 #Vue.js
vue element-ul实现展开和收起功能的实例代码
Nov 25 #Vue.js
在Vue中使用mockjs代码实例
Nov 25 #Vue.js
Vue3配置axios跨域实现过程解析
Nov 25 #Vue.js
Vue使用Element实现增删改查+打包的步骤
Nov 25 #Vue.js
vue + el-form 实现的多层循环表单验证
Nov 25 #Vue.js
vue打开其他项目页面并传入数据详解
Nov 25 #Vue.js
You might like
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
.net开发工程师面试题
2014/02/25 面试题
中学生在校期间的自我评价分享
2013/11/13 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
检讨书怎么写
2015/05/07 职场文书
python实现学员管理系统(面向对象版)
2022/06/05 Python