js實現(xiàn)文字超過顯示寬度每間隔1s自動向左滾動顯示

*{ 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;}

文字如果超出了寬度自動向左滾動文字如果超出了寬度自動向左滾動。

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.οnlοad=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();

}

總結

以上是生活随笔為你收集整理的php实现文字向左跑马灯,js实现文字跑马灯效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。