php实现文字向左跑马灯 js实现文字跑马灯效果

js实现文字超过显示宽度每间隔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实现文字跑马灯效果》对你有帮助，请点赞、收藏，并留下你的观点哦！