js 滚动文字

最新推荐文章于 2022-01-13 22:51:08 发布

千游

最新推荐文章于 2022-01-13 22:51:08 发布

阅读量4.7k

点赞数

分类专栏： javascript 文章标签： scroll function xhtml flash html c

本文链接：https://blog.youkuaiyun.com/zzqkillyou/article/details/5542030

版权

javascript 专栏收录该内容

13 篇文章

订阅专栏

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