首頁  >  文章  >  web前端  >  使用JS如何實現文字無縫滾動

使用JS如何實現文字無縫滾動

亚连
亚连原創
2018-06-14 11:50:011857瀏覽

下面我就為大家分享一篇10行原生JS實現文字無縫滾動的效果,特別簡單,具有很好的參考價值,希望對大家有所幫助

廢話不多說,直接上程式碼

<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(&#39;.tip_box a&#39;)[0].offsetHeight;
var i=0;
setInterval(()=>{
 let startScroll = setInterval(()=>{
  i++;
  document.querySelector(&#39;.tip_box&#39;).style.bottom = (tip_box_a_h/10)*i+&#39;px&#39;;
  if(i%10==0)clearInterval(startScroll);
 },50)
 if(i>(10*(document.querySelectorAll(&#39;.tip_box a&#39;).length-2)))i = 0;
},2500)

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

在nodejs中如何實作websocket通訊功能

在js中如何實作綁定點擊事件(詳細教學)

透過Vue如何實作SSR(詳細教學)

#使用react如何建立d3力導向圖(詳細教學)

使用nodejs如何實作即時通訊

關於axios有關Vue.use方面的問題

使用nodejs如何實現聊天功能?

以上是使用JS如何實現文字無縫滾動的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn