Comment obtenir un défilement de texte transparent à l'aide de JS

Maintenant, je vais partager avec vous un article sur 10 lignes de JS natif pour obtenir l'effet de défilement de texte fluide. C'est très simple et a une bonne valeur de référence. J'espère que cela sera utile à tout le monde

. Sans plus tarder, passons directement au 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>

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

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)

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que ce sera le cas. être utile à tout le monde à l’avenir.

Articles connexes :

Comment implémenter la fonction de communication websocket dans nodejs

Comment implémenter un événement de clic de liaison dans js (tutoriel détaillé)

Comment implémenter SSR via Vue (tutoriel détaillé)

Comment créer un graphe dirigé par la force d3 à l'aide de React (tutoriel détaillé)

Comment implémenter la messagerie instantanée à l'aide de nodejs

Questions sur axios à propos de Vue.use

Comment utiliser nodejs Implémenter la fonction de chat ?

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!