快捷導(dǎo)航

10行原生JS實(shí)現(xiàn)文字無(wú)縫滾動(dòng)(超簡(jiǎn)單)

更新時(shí)間：2018年01月02日 09:51:17 作者：itKingOne

下面小編就為大家分享一篇10行原生JS實(shí)現(xiàn)文字無(wú)縫滾動(dòng)的效果，特別簡(jiǎn)單，具有很好的參考價(jià)值，希望對(duì)大家有所幫助

廢話(huà)不多說(shuō)，直接上代碼

<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)

絕對(duì)的10行，簡(jiǎn)單實(shí)用，無(wú)依賴(lài)

以上這篇10行原生JS實(shí)現(xiàn)文字無(wú)縫滾動(dòng)(超簡(jiǎn)單)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

微信小程序開(kāi)發(fā)教程-手勢(shì)解鎖實(shí)例
手勢(shì)解鎖是app上常見(jiàn)的解鎖方式，相比輸入密碼方式操作起來(lái)要方便許多。這篇文章主要介紹了微信小程序開(kāi)發(fā)教程-手勢(shì)解鎖實(shí)例，有興趣的可以了解一下。
2017-01-01
uniapp 使用定位示例詳解
這篇文章主要為大家介紹了uniapp如何使用定位過(guò)程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
JS如何修改對(duì)象數(shù)組的key值
這篇文章主要介紹了JS如何修改對(duì)象數(shù)組的key值,使用map循環(huán),在map循環(huán)內(nèi)創(chuàng)建一個(gè)新對(duì)象,將item要改變的key賦給新創(chuàng)建的對(duì)象里面新key值,然后push給一個(gè)新創(chuàng)建的數(shù)組dataNew即可,需要的朋友可以參考下
2024-02-02
JavaScript調(diào)用Activex控件的事件的實(shí)現(xiàn)方法
最近在搞一個(gè)客戶(hù)端調(diào)用activex控件的開(kāi)發(fā)。一些實(shí)現(xiàn)方法小結(jié)，需要的朋友可以參考下。
2010-04-04
JavaScript中對(duì)象property的讀取和寫(xiě)入方法介紹
這篇文章主要介紹了JavaScript中對(duì)象property的讀取和寫(xiě)入方法介紹,本文講解了原型繼承鏈中property的讀取、原型繼承鏈中property的寫(xiě)入等內(nèi)容,需要的朋友可以參考下
2014-12-12
JavaScript實(shí)現(xiàn)256色轉(zhuǎn)灰度圖
本文主要介紹了JavaScript實(shí)現(xiàn)256色轉(zhuǎn)灰度圖的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
js正則表達(dá)式驗(yàn)證密碼強(qiáng)度【推薦】
本文主要介紹了js利用正則表達(dá)式驗(yàn)證密碼強(qiáng)度的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-03-03
微信小程序?qū)崿F(xiàn)頁(yè)面跳轉(zhuǎn)傳遞參數(shù)（實(shí)體，對(duì)象）
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)頁(yè)面跳轉(zhuǎn)傳遞參數(shù)（實(shí)體，對(duì)象），文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
JS正則表達(dá)式常見(jiàn)函數(shù)與用法小結(jié)
這篇文章主要介紹了JS正則表達(dá)式常見(jiàn)函數(shù)與用法,結(jié)合實(shí)例形式分析了JS正則表達(dá)式基本功能、常見(jiàn)函數(shù)與相關(guān)使用技巧,需要的朋友可以參考下
2020-04-04
JavaScript監(jiān)聽(tīng)一個(gè)DOM元素大小變化
這篇文章主要介紹了JavaScript監(jiān)聽(tīng)一個(gè)DOM元素大小變化，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04