文字滚动的另一方法 拆分文字来做到文字滚动

最近在看javascript详解这本书看到这个例子

文字滚动，拆分文字来做到文字滚动。

代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>专题</title>
<style type="text/css"> 
body{color:#333;font:12px/20px arial; background:#FFF;}
body,div,form,img,p,h1,h2,dl,dt,dd,ul,li{padding:0;margin:0;}
ul,li{list-style:none;}
em{font-style:normal;}
img{display:block;border:0}
a{color:#333;text-decoration:none}
a:hover,td a:hover{color:#f60;text-decoration:underline}
</style>

<script>
var message = "学习javascript将让你的网页更精彩";
message += " 你准备好，学习javascript了吗？";
var space = "...";
var position = 0;
function scroller(){
  var newtext = message.substring(position,message.length)+space+message.substring(0,position);
    var con = document.getElementById("tabledata");
    con.firstChild.nodeValue = newtext;
    position++;
    if(position>message.length){position=0}
    var timer = window.setTimeout(scroller,200);
    con.onmouseover = function(){
     clearInterval(timer);
    }
    con.onmouseout = function(){
     timer = window.setTimeout(scroller,200);
    }
    
}

window.onload = function(){
scroller();
}
</script>
</head>
<body>

<div id="tabledata">message goes here</div>

</body>
</html>

 

posted @ 2012-12-02 11:45  jingangel  阅读(281)  评论(0)  编辑  收藏  举报