Comment obtenir l'effet de faire défiler une seule ligne de texte (code ci-joint)-tutoriel CSS-php.cn

Comment obtenir l'effet de faire défiler une seule ligne de texte (code ci-joint)

不言

Libérer： 2018-08-06 14:33:01

original

3317 Les gens l'ont consulté

Cet article vous présente comment obtenir l'effet de faire défiler une seule ligne de texte (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Je travaille récemment sur une page d'événement et j'ai besoin d'une seule ligne de texte à faire défiler vers le haut pour afficher l'annonce de la récompense.

L'effet est le suivant :

Comment obtenir leffet de faire défiler une seule ligne de texte (code ci-joint)

Sans plus attendre, collez simplement le code directement en dessous.

le code HTML est le suivant :

 <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>

Copier après la connexion

moins le code est le suivant :

 .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;
     }
 }

Copier après la connexion

Le code js est le suivant :

 // 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();

Copier après la connexion

Il est à noter que :
1. Le projet est basé sur la syntaxe vue.
2. Faites défiler vers le bas et revenez Un délai est ajouté afin de faire défiler jusqu'au dernier puis de revenir du dernier au premier.