vue实现广告栏上下滚动效果
更新时间：2020年11月26日 09:03:54 作者：a 入画浅相思
这篇文章主要介绍了vue实现广告栏上下滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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; /* 容器高度 */
}
效果：
（图中有个地方直接改变内容的为gif图片首尾相接部分）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了详解Vue.js自定义tipOnce指令用法实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了Vue浏览器链接与接口参数实现加密过程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-12-12
这篇文章主要介绍了详解Vite的新体验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,分步骤介绍了安装和使用vue-router的方法,感兴趣的朋友跟随小编一起看看吧2023-08-08
这篇文章主要介绍了从零开始在NPM上发布一个Vue组件的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
vue proxytable代理根路径的同时增加其他代理方式
这篇文章主要介绍了vue proxytable代理根路径的同时增加其他代理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
增删改查是我们写项目百分之七十会遇到的代码,下面这篇文章主要给大家介绍了关于vue前端实现表格数据增查改删功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了60个vue常用工具类,包括vue邮箱验证，vue浏览器识别，vue操作系统识别,vue html过滤，vue身份证校验等需要的朋友可以参考下2023-01-01
这篇文章主要介绍了web项目开发中会出现2个Token原因的解析以及实现的示例代码，有需要的同学可以借鉴参考下，希望可以有所帮助2021-09-09
在支付宝账单页面有这样一个特效切换过渡动效滑入滑出效果，非常方便实用，那么这个功能如何实现的呢？下面小编通过vue实现路由切换过渡动效滑入滑出效果，感兴趣的朋友一起看看吧2022-03-03
最新评论