Un moyen simple d'obtenir un défilement transparent du texte sur 10 lignes de JS-js tutoriel-php.cn

Un moyen simple d'obtenir un défilement transparent du texte sur 10 lignes de JS

小云云

Libérer： 2018-01-03 09:26:51

original

2268 Les gens l'ont consulté

Cet article partage principalement avec vous un article sur 10 lignes de JS natif pour obtenir l'effet de défilement de texte transparent. C'est très simple et a une bonne valeur de référence. J'espère que cela pourra aider tout le monde. tout le monde.

Pas d'autres bêtises, sautez simplement dans le code

<section class="pro_quota_tip"> 
 <p class="tip_box"> 
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >aaaaaaaaa</a> 
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >bbbbbbbbbbbbbb</a> 
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >ccccccccccc</a> 
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >ddddddddddddddd</a> 
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >aaaaaaaaaaaaaa</a> 
 </p> 
</section>

Copier après la connexion

body,#app{
  margin: 0;
  padding: 0;
  font-family:Helvetica;
  background: #f0efef !important;
  width: 100%;
  overflow-x: hidden;
}
a{
 text-decoration: none;
}
.pro_quota_tip{
  background: #fff;
  font-size: 14px;
  overflow: hidden;
  width: 200px;
  height: 49px;
  margin:0 auto;
  margin-top:10%
}
.pro_quota_tip .tip_box{
  position: relative;
}
.pro_quota_tip .tip_box a{
  color: red;
  display: block;
  width: 100%;
  padding:15px 5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

Copier après la connexion

var tip_box_a_h = document.querySelectorAll('.tip_box a')[0].offsetHeight;
var i=0;
setInterval(()=>{
 let startScroll = setInterval(()=>{
  i++;
  document.querySelector('.tip_box').style.bottom = (tip_box_a_h/10)*i+'px';
  if(i%10==0)clearInterval(startScroll);
 },50)
 if(i>(10*(document.querySelectorAll('.tip_box a').length-2)))i = 0;
},2500)

Copier après la connexion

Absolument 10 lignes, simple et pratique, pas de dépendances

Recommandations associées :

Exemples détaillés d'implémentation jQuery du menu accordéon, du menu hiérarchique, du menu supérieur, de l'effet de défilement transparent

Exemples d'implémentation CSS3 du défilement transparent en boucle infinie

Javascript obtient un effet de défilement fluide du carrousel

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!