原生JS實(shí)現(xiàn)文字無(wú)縫滾動(dòng)的示例

這篇文章給大家分享的是有關(guān)原生JS實(shí)現(xiàn)文字無(wú)縫滾動(dòng)的示例的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

js有什么特點(diǎn)

1、js屬于一種解釋性腳本語(yǔ)言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺(tái)下運(yùn)行，擁有著跨平臺(tái)特性；3、js屬于一種弱類型腳本語(yǔ)言，對(duì)使用的數(shù)據(jù)類型未做出嚴(yán)格的要求，能夠進(jìn)行類型轉(zhuǎn)換，簡(jiǎn)單又容易上手；4、js語(yǔ)言安全性高，只能通過(guò)瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對(duì)象的腳本語(yǔ)言，js不僅可以創(chuàng)建對(duì)象，也能使用現(xiàn)有的對(duì)象。

直接上代碼

<section class="pro_quota_tip"> 
 <div 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> 
 </div> 
</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)

感謝各位的閱讀！關(guān)于“原生JS實(shí)現(xiàn)文字無(wú)縫滾動(dòng)的示例”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！