您的位置：首页 > Web前端 > JavaScript

js 滚动文字

2010-04-29 12:14 288 查看

页面中常常需要实现文字的滚动效果，达到动态的效果，实现方式多样，可以用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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： scroll function xhtml flash html c

相关文章推荐

新的分享

章节导航