如何?單行文字向上滾動的效果（附代碼）

這篇文章給大家介紹的內容是關於如何?單行文字向上滾動的效果（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

最近在做一個活動頁，需要一個單行文字向上滾動的效果來展示獲獎公告。

效果如下：

廢話不多說，下面直接貼上代碼。

html代碼如下：

 <div class="notice">   <img src="./img/notice.png" alt="">   <div class="wrap">     <ul :style="{top: noticeTop + 'rem'}" :class="{transitionTop: isActive}">       <li v-for="(item, index) in noticeList" :key="index">{{item.phone}}抽中{{item.prizeName}}</li>       <li v-if="noticeLen > 0">{{noticeList[0].phone}}抽中{{noticeList[0].prizeName}}</li>       <li v-if="noticeLen === 1">{{noticeList[0].phone}}抽中{{noticeList[0].prizeName}}</li>       <li v-if="noticeLen === 0">獲獎公告</li>     </ul>   </div> </div>

less代碼如下：

 .notice{     display: flex;     justify-content: center;     padding-bottom: .26rem;     img{       width: .3rem;       height: .24rem;     }     .wrap{       position: relative;       height:.3rem;       overflow: hidden;       margin-left: .15rem;       font-size: .24rem;       color: #391b03;     }     ul{       position: relative;       top: -.3rem;       li{         height: .3rem;         line-height: .3rem;       }     }     .transitionTop{       transition: top 200ms ease-in-out;     } }

js代碼如下：

 // data下 noticeTop: 0, // 公告top值 isActive:true, // 是否顯示transitionTop動畫 timer: null, // 公告滾動定時器 noticeList: [   {     phone:'135****1234',     prizeName:'50元還款券'   },   {     phone:'135****1234',     prizeName:'60元還款券'   },   {     phone:'135****1234',     prizeName:'70元還款券'   } ], // 公告列表  // computed下 noticeLen(){ // 公告列表長度     return this.noticeList.length; } //methods下 noticeScroll(){// 公告滾動，定時改變公告的top值     if(this.noticeLen > 0){       let index =1,           len = this.noticeLen === 1 ? 3 : (this.noticeLen + 1);       this.timer = setInterval(() => {         this.isActive = true;         this.noticeTop = -3 * index / 10;         index ++;         if(index === len){// 滾動到底部時返回           let delayTime = setTimeout(() => {             this.isActive = false;             this.noticeTop = 0;             index = 1;             clearTimeout(delayTime);           }, 1000);         }       }, 3000);     } } //調用 this.noticeScroll();

需要說明的是：
1.項目是基於vue的文法
2.滾動到底部返回時加了個延遲，是為了能滾動到最後一個，然後從最後一個返回到第一個。

相關文章推薦：

css3怎麼實現頁面滾動動畫特效？

怎麼用css3製作樣式好看的按鈕？