快捷導(dǎo)航

Vue實(shí)現(xiàn)列表跑馬燈效果

更新時(shí)間：2022年04月11日 16:05:53 作者：luanluan8888

這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)列表跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Vue實(shí)現(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;// 因?yàn)樵谙⑾蛏蠞L動(dòng)的時(shí)候需要添加css3過渡動(dòng)畫，所以這里需要設(shè)置true
?? ??? ??? ?setTimeout(()=>{ ? ?// ?這里直接使用了es6的箭頭函數(shù)，省去了處理this指向偏移問題，代碼也比之前簡(jiǎn)化了很多
?? ??? ? ? ? ? ?this.TZGGList.push(this.TZGGList[0]); // 將數(shù)組的第一個(gè)元素添加到數(shù)組的
?? ??? ? ? ? ? ?this.TZGGList.shift(); //刪除數(shù)組的第一個(gè)元素
?? ??? ? ? ? ? ?this.animate = false // margin-top 為0 的時(shí)候取消過渡動(dòng)畫，實(shí)現(xiàn)無縫滾動(dòng)
?? ??? ? ? ? ?}, 1000)
?? ??? ?},
?? ??? ?
?? ??? ?//鼠標(biāo)懸停，停止?jié)L動(dòng)
?? ??? ?stopScroll () {
?? ??? ??? ?var target = this.$refs.con1;
?? ??? ??? ?clearInterval(this.timeId)
?? ??? ?},
?? ??? ?
?? ??? ?//鼠標(biāo)移開 ，接著滾動(dòng)
?? ??? ?startScroll () {
?? ??? ??? ?var target = this.$refs.con1;
?? ??? ??? ?this.timeId = setInterval(this.scroll,1500); ?// 設(shè)置滑動(dòng)速度
?? ??? ?},
?? ?},
?? ?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>

運(yùn)行過程中發(fā)現(xiàn)走馬燈title可以滾動(dòng)改變但是對(duì)應(yīng)的span標(biāo)簽的內(nèi)容不變，可能是因?yàn)闉g覽器版本過高，可更換瀏覽器或降低瀏覽器版本試試

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: