js實(shí)現(xiàn)文字跑馬燈效果
更新時間：2017年02月23日 16:28:54 作者：missFanny
本文主要介紹了js實(shí)現(xiàn)文字超過顯示寬度每間隔1s自動向左滾動顯示的跑馬燈效果，具有很好的參考價值，下面跟著小編一起來看下吧
本示例將實(shí)現(xiàn)文字跑馬燈效果：文字超過顯示寬度每間隔1s自動向左滾動顯示，話不多說，請看代碼
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>js實(shí)現(xiàn)文字超過顯示寬度每間隔1s自動向左滾動顯示</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{font:12px/1 '微軟雅黑';}
.wrapper{font-size: 0.85rem; color: #333; padding-top: 0.75rem; margin: 0 0.75rem; white-space: nowrap; overflow: hidden;width: 300px;}
.inner{ width:1000px;overflow:hidden;}
.inner p{ display:inline-block;}
</style>
</head>
<body>
<div id="wrapper" class="wrapper">
<div class="inner">
<p class="txt">文字如果超出了寬度自動向左滾動文字如果超出了寬度自動向左滾動。</p>
</div>
</div>
<script>
var wrapper = document.getElementById('wrapper');
var inner = wrapper.getElementsByTagName('div')[0];
var p = document.getElementsByTagName('p')[0];
var p_w = p.offsetWidth;
var wrapper_w = wrapper.offsetWidth;
window.onload=function fun(){
if(wrapper_w > p_w){ return false;}
inner.innerHTML+=inner.innerHTML;
setTimeout("fun1()",2000);
}
function fun1(){
if(p_w > wrapper.scrollLeft){
wrapper.scrollLeft++;
setTimeout("fun1()",30);
}
else{
setTimeout("fun2()",2000);
}
}
function fun2(){
wrapper.scrollLeft=0;
fun1();
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
javascript 數(shù)組去重復(fù)(在線去重工具)
很多情況下我們需要去掉重復(fù)的內(nèi)容，一般我們都是將很多內(nèi)容放到一個數(shù)組里面，然后再去重復(fù)，這里簡單為大家整理一下2016-12-12
原生js實(shí)現(xiàn)文件上傳、下載、封裝等實(shí)例方法
在本篇文章里小編給各位整理的是關(guān)于原生js實(shí)現(xiàn)文件上傳、下載、封裝等實(shí)例方法，需要的朋友們可以參考學(xué)習(xí)下。2020-01-01
這篇文章主要為大家詳細(xì)介紹了js圖片輪播插件的封裝代碼，只需要獲取到圖片和按鈕，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
弱類型語言javascript中 a,b 的運(yùn)算實(shí)例小結(jié)
這篇文章主要介紹了弱類型語言javascript中 a,b 的運(yùn)算,結(jié)合實(shí)例形式總結(jié)分析了js閉包函數(shù)中布爾值與字符串的a，b運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
webpack5的loader配置小白學(xué)習(xí)篇
這篇文章主要為大家介紹了webpack5的loader配置非常適合webpack入門的小白學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
iview?date-picker?options只可選當(dāng)前日期之前的(當(dāng)前之后的禁用)
如果日期對象date的時間戳大于當(dāng)前時間的時間戳,則該日期在當(dāng)前日期之后,會被禁用,下面通過實(shí)例代碼給大家介紹iview?date-picker?options只可選當(dāng)前日期之前的,感興趣的朋友跟隨小編一起看看吧2024-12-12
事件是將JavaScript腳本與網(wǎng)頁聯(lián)系在一起的主要方式，是JavaScript中最重要的主題之一。本文將詳細(xì)探討JavaScript的事件機(jī)制，并對比分析了瀏覽器之間的不同，具體內(nèi)容包括事件流、事件處理程序綁定方式、事件對象等。2017-01-01
JS?Angular?服務(wù)器端渲染應(yīng)用設(shè)置渲染超時時間???????
這篇文章主要介紹了JS?Angular服務(wù)器端渲染應(yīng)用設(shè)置渲染超時時間,???????通過setTimeout模擬一個需要5秒鐘才能完成調(diào)用的API展開詳情，需要的小伙伴可以參考一下2022-06-06
重構(gòu)Javascript代碼示例(重構(gòu)前后對比)
回顧頭來看看那些Javascript腳本，有寫得不太理想，過于復(fù)雜?，F(xiàn)抽取出來，重構(gòu)它們,想學(xué)習(xí)javascript重構(gòu)的朋友可以參考下啊，網(wǎng)本文可以幫助你的2013-01-01
這篇文章主要介紹了關(guān)于js內(nèi)存泄露的一個好例子。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12