Vue实现列表跑马灯效果

Vue实现列表跑马灯效果

本文实例为大家分享了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标签的内容不变,可能是因为浏览器版本过高,可更换浏览器或降低浏览器版本试试

推荐阅读