Heim > Web-Frontend > CSS-Tutorial > So erzielen Sie den Effekt, eine einzelne Textzeile nach oben zu scrollen (Code im Anhang)

So erzielen Sie den Effekt, eine einzelne Textzeile nach oben zu scrollen (Code im Anhang)

不言
Freigeben: 2018-08-06 14:33:01
Original
3324 Leute haben es durchsucht

In diesem Artikel erfahren Sie, wie Sie den Effekt des Scrollens einer einzelnen Textzeile (mit Code) erzielen. Ich hoffe, dass er für Freunde in Not hilfreich ist.

Ich arbeite kürzlich an einer Veranstaltungsseite und benötige eine einzelne Textzeile, um nach oben zu scrollen und die Preisbekanntgabe anzuzeigen.

Der Effekt ist wie folgt:

So erzielen Sie den Effekt, eine einzelne Textzeile nach oben zu scrollen (Code im Anhang)

Fügen Sie ohne weitere Umschweife einfach den Code direkt unten ein.

HTML-Code lautet wie folgt:

 <div class="notice">
   <img src="./img/notice.png" alt="">
   <div class="wrap">
     <ul :style="{top: noticeTop + &#39;rem&#39;}" :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>
Nach dem Login kopieren

weniger Code lautet wie folgt:

 .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;
     }
 }
Nach dem Login kopieren

Der js-Code lautet wie folgt:

 // data下
 noticeTop: 0, // 公告top值
 isActive:true, // 是否显示transitionTop动画
 timer: null, // 公告滚动定时器
 noticeList: [
   {
     phone:&#39;135****1234&#39;,
     prizeName:&#39;50元还款券&#39;
   },
   {
     phone:&#39;135****1234&#39;,
     prizeName:&#39;60元还款券&#39;
   },
   {
     phone:&#39;135****1234&#39;,
     prizeName:&#39;70元还款券&#39;
   }
 ], // 公告列表
 
 // 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();
Nach dem Login kopieren

Es ist zu beachten, dass:
Das Projekt basiert auf der Vue-Syntax
2 Beim Scrollen nach unten und beim Zurückkehren wird eine Verzögerung hinzugefügt. Dies dient dazu, zum letzten scrollen und dann vom letzten zum ersten zurückkehren zu können.                                      

Verwandte Artikel Empfohlen:

Wie erzielt man Spezialeffekte für seitenrollende Animationen?

Wie verwende ich CSS3, um gut aussehende Schaltflächen zu erstellen?

Das obige ist der detaillierte Inhalt vonSo erzielen Sie den Effekt, eine einzelne Textzeile nach oben zu scrollen (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage