vue div滚动,vue 向上无缝滚动
这篇文章主要介绍了某视频剪辑软件新闻自下往上滚动效果，当鼠标鼠标放上暂停滚动，鼠标移出继续滚动，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
如图所示自下往上滚动鼠标放上暂停滚动鼠标移出继续滚动
一、html：
div class=新闻列表 @ mouse over= mouse over @ mouseOut= mouseOut
ul id= con 1 ref= con 1 :class= { anim:animate==true }
li v-for=(item，key)in items :key= key class= news item
img src=././assets/img/iconpng alt= style= margin-top:5px；宽度：20px高度：20px
span{{ item.title }}/span
span @ click=获取代码(项目。二维码)’查看/span
/李
/ul
div class=显示代码 v-if= codeShow
p style= text-align:right；右填充：10px游标：指针@click=codeShow=falsex/p
img :src=code alt=
p更多内容可扫码查看/p
/div
/div
二.css动画
。新闻列表{
宽度：90%;
边距：10px自动；
高度：90px
溢出：隐藏；
字体大小：12px
字体系列：方平SC；
字体粗细：400;
行高：17px
颜色：# ffffff
/*背景色：红色；*/
}。动画{
过渡：全1;
边距-顶部：-30px；
}
#con1 li {
列表样式：无；
行高：30px
高度：30px
}
三、js代码
已安装(){
这个。timer=setInterval(这个。卷轴，2000年)；
这个api.newsList({
限制：12,
第一页
}).然后(res={
this.items=res.data.records
})
},
方法：{
滚动(){
this.animate=true//因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置真实的
setTimeout(()={
//这里直接使用了es6的箭头函数，省去了处理这指向偏移问题，代码也比之前简化了很多
这个。项目。推(这个。项目[0])；//将数组的第一个元素添加到数组的
这个。项目。shift()；//删除数组的第一个元素
this.animate=false//上边距为0 的时候取消过渡动画，实现无缝滚动
}, 1000);
},
获取代码(二维码){
this.code=二维码
this.codeShow=true
},
mouseOver(){
console.log(鼠标悬停)
//这个。animate=false
clearInterval(this.timer)
},
mouseOut(){
//这个。animate=true
这个。timer=setInterval(这个。卷轴，2000年)；
}
},
到此这篇关于某视频剪辑软件新闻自下往上滚动效果的文章就介绍到这了，更多相关某视频剪辑软件新闻滚动效果内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。