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实现文字跑马灯效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。