Eine einfache Möglichkeit, nahtloses Scrollen von Text in 10 JS-Zeilen zu erreichen

In diesem Artikel geht es hauptsächlich darum, wie man mit nativem JS den Effekt des nahtlosen Scrollens erzielt. Er ist sehr einfach und hat einen guten Referenzwert alle.

Kein weiterer Unsinn, springen Sie einfach in den 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)

Absolut 10 Zeilen, einfach und praktisch, keine Abhängigkeiten

Verwandte Empfehlungen:

Detaillierte Beispiele für die jQuery-Implementierung des Akkordeonmenüs, des hierarchischen Menüs, des oberen Menüs und des nahtlosen Bildlaufeffekts

Beispiele für die CSS3-Implementierung des nahtlosen Endlosschleifen-Bildlaufs

Javascript erzielt einen nahtlosen Scroll-Effekt des Karussells

Das obige ist der detaillierte Inhalt vonEine einfache Möglichkeit, nahtloses Scrollen von Text in 10 JS-Zeilen zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!