Vue實現(xiàn)列表跑馬燈效果
本文實例為大家分享了Vue實現(xiàn)列表跑馬燈效果的具體代碼,供大家參考,具體內(nèi)容如下
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過渡動畫,所以這里需要設(shè)置true ?? ??? ??? ?setTimeout(()=>{ ? ?// ?這里直接使用了es6的箭頭函數(shù),省去了處理this指向偏移問題,代碼也比之前簡化了很多 ?? ??? ? ? ? ? ?this.TZGGList.push(this.TZGGList[0]); // 將數(shù)組的第一個元素添加到數(shù)組的 ?? ??? ? ? ? ? ?this.TZGGList.shift(); //刪除數(shù)組的第一個元素 ?? ??? ? ? ? ? ?this.animate = false // margin-top 為0 的時候取消過渡動畫,實現(xiàn)無縫滾動 ?? ??? ? ? ? ?}, 1000) ?? ??? ?}, ?? ??? ? ?? ??? ?//鼠標(biāo)懸停,停止?jié)L動 ?? ??? ?stopScroll () { ?? ??? ??? ?var target = this.$refs.con1; ?? ??? ??? ?clearInterval(this.timeId) ?? ??? ?}, ?? ??? ? ?? ??? ?//鼠標(biāo)移開 ,接著滾動 ?? ??? ?startScroll () { ?? ??? ??? ?var target = this.$refs.con1; ?? ??? ??? ?this.timeId = setInterval(this.scroll,1500); ?// 設(shè)置滑動速度 ?? ??? ?}, ?? ?}, ?? ?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>
運行過程中發(fā)現(xiàn)走馬燈title可以滾動改變但是對應(yīng)的span標(biāo)簽的內(nèi)容不變,可能是因為瀏覽器版本過高,可更換瀏覽器或降低瀏覽器版本試試
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue中當(dāng)圖片地址無效的時候,顯示默認(rèn)圖片的方法
今天小編就為大家分享一篇vue中當(dāng)圖片地址無效的時候,顯示默認(rèn)圖片的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue使用jsMind思維導(dǎo)圖的實戰(zhàn)指南
jsMind是一個顯示/編輯思維導(dǎo)圖的純javascript類庫,其基于 html5的canvas進行設(shè)計,這篇文章主要給大家介紹了關(guān)于vue使用jsMind思維導(dǎo)圖的相關(guān)資料,需要的朋友可以參考下2023-01-01Vue3的ts報錯:類型"{}"上不存在屬性"xxx"的兩種徹底根治解決方法
這篇文章主要給大家介紹了關(guān)于Vue3的ts報錯:類型"{}"上不存在屬性"xxx"的兩種徹底根治解決方法,這是最近做項目中遇到的一個問題,這里給大家總結(jié)下解決辦法,需要的朋友可以參考下2023-08-08antd Form組件方法getFieldsValue獲取自定義組件的值操作
這篇文章主要介紹了antd Form組件方法getFieldsValue獲取自定義組件的值操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10