vue div滚动,vue中div模块左右滑动效果

　　这篇文章主要为大家详细介绍了vue3实现半铸钢钢性铸铁(铸造半钢)无限无缝滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了vue3实现半铸钢钢性铸铁(铸造半钢)无限无缝滚动效果的具体代码，供大家参考，具体内容如下

　　template

　　双层差异嵌套，进行隐藏滚动显示

　　div class=列表容器

　　div class=marquee id=carList

　　数据映射.列表中的模板v-for=(项目，索引): key=索引

　　div class=列表项

　　div class= item-name text-overflow“{ item。name } }/div

　　div class= item-road text-overflow { item。道路} }/div

　　/div

　　/模板

　　/div

　　/div

　　script

　　复制数字正射影像图元素中的内容，衔接上一次滚动效果

　　导出默认定义组件({

　　setup() {

　　常数数据映射=反应({

　　列表：[

　　{姓名： 浙A89268 ，道路： 游8路，状态：0,

　　{姓名： 浙A89268 ，道路： 游8路，状态：0,

　　{姓名： 浙A89268 ，道路： 游8路，状态：1 },

　　{姓名： 浙A89268 ，道路： 游8路，状态：0,

　　{姓名： 浙A89268 ，道路： 游8路，状态：1 },

　　{姓名： 浙A89268 ，道路： 游一路，状态：0,

　　],

　　});

　　onMounted(()={

　　const marquee=文档。getelementbyid( carList )；

　　字幕。innerhtml=marquee。innerhtml字幕。innerhtml

　　});

　　}

　　})

　　style

　　半铸钢钢性铸铁(铸造半钢)手写动画效果。列表-容器{

　　宽度：720像素

　　高度：170像素

　　左边距：13px

　　溢出：隐藏；

　　位置：相对；

　　}

　　//无限滚动。字幕{

　　//动画-延迟：-5s；

　　动画：字幕15s线性无限；

　　}。字幕：悬停{

　　动画-播放-状态：暂停；

　　}

　　@关键帧选取框{

　　0% {

　　transform:平移y(0%)；

　　}

　　100% {

　　transform:平移y(-51%)；//这里不是-100%!

　　}

　　}

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。