vue控制div滚动条(vue3实现CSS无限无缝滚动效果)
类别:编程学习 浏览量:2434
时间:2021-10-21 07:39:25 vue控制div滚动条
vue3实现CSS无限无缝滚动效果本文实例为大家分享了vue3实现CSS无限无缝滚动效果的具体代码,供大家参考,具体内容如下
template
双层li嵌套,进行隐藏滚动显示
<li class="list-container"> <li class="marquee" id="carList"> <template v-for="(item, index) in dataMap.list" :key="index"> <li class="list-item"> <li class="item-name text-overflow">{{ item.name }}</li> <li class="item-road text-overflow">{{ item.road }}</li> </li> </template> </li> </li>
script
复制dom元素中的内容,衔接上一次滚动效果
export default defineComponent({ setup() { const dataMap = reactive({ list: [ { name: '浙A89268', road: '游8路', status: 0 }, { name: '浙A89268', road: '游8路', status: 0 }, { name: '浙A89268', road: '游8路', status: 1 }, { name: '浙A89268', road: '游8路', status: 0 }, { name: '浙A89268', road: '游8路', status: 1 }, { name: '浙A89268', road: '游1路', status: 0 }, ], }); onMounted(() => { const marquee = document.getElementById('carList'); marquee.innerHTML = marquee.innerHTML + marquee.innerHTML; }); } })
style
CSS手写动画效果
.list-container { width: 720px; height: 170px; margin-left: 13px; overflow: hidden; position: relative; } //无限滚动 .marquee { //animation-delay: -5s; animation: marquee 15s linear infinite; } .marquee:hover { animation-play-state: paused; } @keyframes marquee { 0% { transform: translateY(0%); } 100% { transform: translateY(-51%); //这里不是-100%! } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue3.0安装element(vue3+electron12+dll开发客户端配置详解)
- vue3 axios 怎么封装api(vue中如何简单封装axios浅析)
- vue3和vue2(Vue3对比Vue2的优点总结)
- vue3 响应式的实现过程(Vue3.x使用mitt.js进行组件通信)
- vue3.0带参数的方法(Vue3中ref与toRef的区别浅析)
- vue3 composition api用法(vue3中provide和inject的使用)
- vue 路由的两种模式(Vue3使用路由VueRouter4的简单示例)
- vue3.0 如何使用useroute(详解vue3中setUp和reactive函数的用法)
- vue-router起步教程交流(vue3使用vue-router的完整步骤记录)
- vue3组件通讯消息(Vue3实现Message消息组件示例)
- electronvue最新版本(Vue3和Electron实现桌面端应用详解)
- vue函数中的默认参数(Vue3中SetUp函数的参数props、context详解)
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- vue3.0路线图(Vue3.0 自己实现放大镜效果案例讲解)
- vuex-table行列转换效果(vue3+el-table实现行列转换)
- vue的watch用法(Vue3中watch的用法与最佳实践指南)
- 三千年第一美女鞠婧祎出演白素贞pk杨紫,颜值胜赵雅芝王祖贤(三千年第一美女鞠婧祎出演白素贞pk杨紫)
- 成都轨道交通13号线一期工程最新进展(成都轨道交通13号线一期工程最新进展)
- 越南没事(越南没事情做)
- 重庆旅游攻略(重庆旅游3-4天攻略最佳线路)
- 周杰伦演唱会门票(周杰伦演唱会门票多少钱一张2023)
- 焕然一新 成都轨道集团官方网站改版上线(成都轨道集团官方网站改版上线)
热门推荐
- serv-u设置文件夹权限(serv_U 域离线 解决方法)
- js开发工具图解(浅谈前端JS沙箱实现的几种方式)
- sqlserver2008收缩数据文件(SQL2008 详解直接将XML存入到SQL中)
- laravel框架详解(laravel 5.3 单用户登录简单实现方法)
- docker swarm管理(Docker Swarm 服务编排之命令详解)
- ios键盘字符预览怎么关闭(详解通过focusout事件解决IOS键盘收起时界面不归位的问题)
- vueaxios使用教程交流(Vue使用axios图片上传遇到的问题)
- mysql为什么优选innodb(如何区分MySQL的innodb_flush_log_at_trx_commit和sync_binlog)
- 阿里云oss内网流量(阿里云OSS访问权限配置RAM权限控制实现)
- pycharm如何自定义模板(对Pycharm创建py文件时自定义头部模板的方法详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9