本示例將實現文字跑馬燈效果：文字超過顯示寬度每間隔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實現文字超過顯示寬度每間隔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>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
