本示例將實現(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>以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持錯新站長站！
新聞熱點
疑難解答
圖片精選
