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