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