JS实战：仿LED跑马灯效果
Posted 带土哈
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实战：仿LED跑马灯效果相关的知识，希望对你有一定的参考价值。
1.案例描述
使用javascript实现文字跑马灯效果。
2.实现思路
（1）首先利用html和css创建LED跑马灯背景及文字内容；
（2）然后将外层div对象的宽度和文字对象宽度进行比较，设置定时文字向左循环移动。
3.代码如下：
<!doctype html>
<html>
<head>
<title>javaScript实现文字跑马灯</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font:12px/1 \'华文新魏\';}
.wrapper{font-size:0.85rem;
color:#333;
padding-top:0.75rem;
margin:0.75rem;
white-space:nowrap;
overflow:hidden;
width:300px;}
.inner{width:1000px;
overflow:hidden;
background-image:url("http://www.webdm.cn/images/20130228/LEDbj.gif");
padding-top:8px;
padding-right:5px;
padding-left:5px;
height:50px;}
.inner p{display:inline-block;color:#FF0000;font-size:35px}
</style>
</head>
<body>
<div id="wrapper" class="wrapper">
<div class="inner">
<p class="txt">欢迎来到带土哈博客园，让我们一起学习javascript吧</p>
</div>
</div>
<script>
var wrapper = document.getElementByld(\'wrapper\');
var inner = wrapper.getElementsByTagName(\'div\')[0];
var p=document.getElementsByTagName(\'p\')[0];
var p_w = p.offsetWidth;
var wrapper_w = wrapper.offsetWidth;
window.onload = 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();
}
</script>
</body>
</html>
运行结果如图所示：
以上是关于JS实战：仿LED跑马灯效果的主要内容，如果未能解决你的问题，请参考以下文章