js实现文字跑马灯效果
本示例将实现文字跑马灯效果：文字超过显示宽度每间隔1s自动向左滚动显示，话不多说，请看代码
<!doctypehtml>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<metaname="format-detection"content="telephone=no,email=no,date=no,address=no">
<title>js实现文字超过显示宽度每间隔1s自动向左滚动显示</title>
<styletype="text/css">
*{margin:0;padding:0;}
body{font:12px/1'微软雅黑';}
.wrapper{font-size:0.85rem;color:#333;padding-top:0.75rem;margin:00.75rem;white-space:nowrap;overflow:hidden;width:300px;}
.inner{width:1000px;overflow:hidden;}
.innerp{display:inline-block;}
</style>
</head>
<body>
<divid="wrapper"class="wrapper">
<divclass="inner">
<pclass="txt">文字如果超出了宽度自动向左滚动文字如果超出了宽度自动向左滚动。</p>
</div>
</div>
<script>
varwrapper=document.getElementById('wrapper');
varinner=wrapper.getElementsByTagName('div')[0];
varp=document.getElementsByTagName('p')[0];
varp_w=p.offsetWidth;
varwrapper_w=wrapper.offsetWidth;
window.onload=functionfun(){
if(wrapper_w>p_w){returnfalse;}
inner.innerHTML+=inner.innerHTML;
setTimeout("fun1()",2000);
}
functionfun1(){
if(p_w>wrapper.scrollLeft){
wrapper.scrollLeft++;
setTimeout("fun1()",30);
}
else{
setTimeout("fun2()",2000);
}
}
functionfun2(){
wrapper.scrollLeft=0;
fun1();
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！