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

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_30784141

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量131

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jingangel/archive/2012/12/02/2798018.html

本文通过一个具体的JavaScript代码示例，详细介绍了如何利用JavaScript实现文字滚动效果，旨在帮助开发者掌握这一实用的网页交互技术。

最近在看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>