现在的位置: 首页 > 综合 > 正文

js 滚动文字

2013年08月23日 ⁄ 综合 ⁄ 共 926字 ⁄ 字号 评论关闭

   页面中常常需要实现文字的滚动效果,达到动态的效果,实现方式多样,可以用flash、将文字做成gif图片,或使用3c 自带的标签<marquee>实现,例如<marquee direction=left>从右向左移!</marquee> ,当然,如果要灵活的变换,还是js比较实用,下面是我写的一个最简单的文字移动,主要就是利用substring()和setTimeOut()来实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>           
</style>
</head>
<body>
<center>
<div id = "showMsg"></div>
</center>
</body>
</html>
<script>
var msg="你好,欢迎来到我的博客空间";
var seq=0;
//用于页面显示的div
var obj = document.getElementById('showMsg');
//从左到右,逐渐显示
function Scroll() {
len = msg.length;
obj.innerHTML = msg.substring(0, seq+1);
seq++;
if ( seq >= len ) {
seq = 0;
window.setTimeout("Scroll2();", 100);
}
else{
 window.setTimeout("Scroll();", 100 );
}
}

//从左到右,逐渐消失
function Scroll2() {
len = msg.length;
obj.innerHTML=msg.substring(seq, len);
seq++;
if ( seq >= len ) {
  seq = 0; window.setTimeout("Scroll();", 200);
}else{
  window.setTimeout("Scroll2();", 100);
}
}
Scroll();
</script>

抱歉!评论已关闭.