js實現(xiàn)文字跑馬燈效果
更新時間：2017年02月23日 16:28:54 作者：missFanny
本文主要介紹了js實現(xiàn)文字超過顯示寬度每間隔1s自動向左滾動顯示的跑馬燈效果，具有很好的參考價值，下面跟著小編一起來看下吧
本示例將實現(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實現(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>
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
很多情況下我們需要去掉重復的內容，一般我們都是將很多內容放到一個數(shù)組里面，然后再去重復，這里簡單為大家整理一下2016-12-12
在本篇文章里小編給各位整理的是關于原生js實現(xiàn)文件上傳、下載、封裝等實例方法，需要的朋友們可以參考學習下。2020-01-01
這篇文章主要為大家詳細介紹了js圖片輪播插件的封裝代碼，只需要獲取到圖片和按鈕，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了弱類型語言javascript中 a,b 的運算,結合實例形式總結分析了js閉包函數(shù)中布爾值與字符串的a，b運算相關操作技巧,需要的朋友可以參考下2019-08-08
這篇文章主要為大家介紹了webpack5的loader配置非常適合webpack入門的小白學習，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
iview?date-picker?options只可選當前日期之前的(當前之后的禁用)
如果日期對象date的時間戳大于當前時間的時間戳,則該日期在當前日期之后,會被禁用,下面通過實例代碼給大家介紹iview?date-picker?options只可選當前日期之前的,感興趣的朋友跟隨小編一起看看吧2024-12-12
事件是將JavaScript腳本與網(wǎng)頁聯(lián)系在一起的主要方式，是JavaScript中最重要的主題之一。本文將詳細探討JavaScript的事件機制，并對比分析了瀏覽器之間的不同，具體內容包括事件流、事件處理程序綁定方式、事件對象等。2017-01-01
JS?Angular?服務器端渲染應用設置渲染超時時間???????
這篇文章主要介紹了JS?Angular服務器端渲染應用設置渲染超時時間,???????通過setTimeout模擬一個需要5秒鐘才能完成調用的API展開詳情，需要的小伙伴可以參考一下2022-06-06
回顧頭來看看那些Javascript腳本，有寫得不太理想，過于復雜?，F(xiàn)抽取出來，重構它們,想學習javascript重構的朋友可以參考下啊，網(wǎng)本文可以幫助你的2013-01-01
這篇文章主要介紹了關于js內存泄露的一個好例子。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12