js在html中加文字走马灯特效,js实现文字跑马灯效果

本示例将实现文字跑马灯效果：文字超过显示宽度每间隔1s自动向左滚动显示，话不多说，请看代码

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();

}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！