So erreichen Sie nahtloses Scrollen von Text mit JS

Jetzt werde ich mit Ihnen einen Artikel über 10 Zeilen natives JS teilen, um den Effekt des nahtlosen Textscrollens zu erzielen. Er ist sehr einfach und hat einen guten Referenzwert.

Kein weiterer Unsinn, lass uns direkt zum Code gehen

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

e

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)

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die WebSocket-Kommunikationsfunktion in NodeJS

So implementieren Sie ein Bindungsklickereignis in JS (ausführliches Tutorial)

So implementieren Sie SSR über Vue (ausführliches Tutorial)

So erstellen Sie einen d3-kraftgesteuerten Graphen mit React (ausführliches Tutorial)

So implementieren Sie Instant Messaging mit nodejs

Fragen zu Vue.use in axios

Wie Nodejs verwenden Chat-Funktion implementieren?

Das obige ist der detaillierte Inhalt vonSo erreichen Sie nahtloses Scrollen von Text mit JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!