本文实例为大家分享了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。