Vue实现列表跑马灯效果

来源：jb51　　时间：2022/4/11 18:16:06　　对本文有异议

本文实例为大家分享了Vue实现列表跑马灯效果的具体代码，供大家参考，具体内容如下

Vue文件中：

<ul class="GZDT_list clearfix active" @mouseover="stopScroll" @mouseout="startScroll">
? ? <li v-for ="item in gzdtList" >
?? ??? ?<a :href="item.url" rel="external nofollow"  target="_blank" :title="item.title" >
?? ??? ??? ?<span class="GZDTtitle">
?? ??? ??? ??? ?{{item.title | ellipsis}}
?? ??? ??? ?</span>
?? ??? ?</a>
?? ??? ?<span class="right date">{{item.date}}</span>
? ? </li>
</ul>

js：

<script>
?? ?export default{
?? ?data:function(){
?? ??? ?return {
?? ??? ??? ?timeId:null,
?? ??? ??? ?// 跑马灯
?? ??? ??? ?animate:false,
?? ??? ?};
?? ?},
?? ?filters: {},
?? ?methods:{
?? ??? ?// 跑马灯
?? ??? ?scroll(){
?? ??? ??? ?this.animate =true;// 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
?? ??? ??? ?setTimeout(()=>{ ? ?// ?这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
?? ??? ? ? ? ? ?this.TZGGList.push(this.TZGGList[0]); // 将数组的第一个元素添加到数组的
?? ??? ? ? ? ? ?this.TZGGList.shift(); //删除数组的第一个元素
?? ??? ? ? ? ? ?this.animate = false // margin-top 为0 的时候取消过渡动画，实现无缝滚动
?? ??? ? ? ? ?}, 1000)
?? ??? ?},
?? ??? ?
?? ??? ?//鼠标悬停，停止滚动
?? ??? ?stopScroll () {
?? ??? ??? ?var target = this.$refs.con1;
?? ??? ??? ?clearInterval(this.timeId)
?? ??? ?},
?? ??? ?
?? ??? ?//鼠标移开 ，接着滚动
?? ??? ?startScroll () {
?? ??? ??? ?var target = this.$refs.con1;
?? ??? ??? ?this.timeId = setInterval(this.scroll,1500); ?// 设置滑动速度
?? ??? ?},
?? ?},
?? ?mounted: function() {
?? ??? ?this.init();
?? ??? ?this.timeId=setInterval(this.scroll,1500);
?? ?},
}
</script>

css：

/*跑马灯*/
<style>
?? ?#box{
?? ??? ?height: 238px;
?? ??? ?overflow: hidden;
?? ??? ?border: 1px solid #ffffff;
?? ??? ?margin-top: 0px;
?? ?}?
?? ?.anim{
?? ??? ?transition: all 2s;
?? ?}
?? ?
?? ?#con1 li{
?? ??? ?list-style: none;
?? ??? ?line-height: 35px;
?? ??? ?height: 35px;
?? ?}
</style>

运行过程中发现走马灯title可以滚动改变但是对应的span标签的内容不变，可能是因为浏览器版本过高，可更换浏览器或降低浏览器版本试试

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

友情链接：