Maison > interface Web > tutoriel CSS > le corps du texte

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

Articles connexes Recommandé :

Comment obtenir des effets spéciaux d'animation par défilement de page ?

Comment utiliser CSS3 pour créer de jolis boutons ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal