当前位置:编程学习 > JS >>

JS彩色文字间断滚动,文字向上滚动

JavaScript文字向上滚动,移动高度和移动步幅都可调,数字越大越快,移动频度(毫秒)也是可调的,越大越慢,另外间断时间为(毫秒),此实例是一段文字固定在窗器内间断滚动,彩色文字的实现其实较麻烦,而且看上去似乎没这个必要,不喜欢的可直接去掉这个功能。
答案:<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>间断滚动</title>
<style>
#Marquee{ height:88px; overflow:hidden;}
#Marquee div{ border:1px solid #DDD3FE; background:#EEECF4; height:88px;}
</style>
</head>
<body>
<div id="Marquee">
	<div style="width: 260px; height: 88px">
<Font Size=3 Face="楷体_GB2312"><Font Color="#FF00FF">雨</Font><Font Color="#DE00FF">来</Font><Font Color="#BC00FF">半</Font><Font Color="#9B00FF">天</Font><Font Color="#7900FF">才</Font><Font Color="#5800FF">喘</Font><Font Color="#3600FF">过</Font><Font Color="#1500FF">气</Font><Font Color="#000AFF">来</Font><Font Color="#0023FF">,</Font><Font Color="#003CFF">脑</Font><Font Color="#0055FF">袋</Font><Font Color="#006FFF">里</Font><Font Color="#0088FF">像</Font><Font Color="#00A1FF">有</Font><Font Color="#00BAFF">一</Font><Font Color="#00C0E5">窝</Font><Font Color="#00C0C3">蜂</Font><Font Color="#00C0A2">,</Font><Font Color="#00C080">嗡</Font><Font Color="#00C05E">嗡</Font><Font Color="#00C03D">地</Font><Font Color="#00BBFF">是</Font><Font Color="#00A2FF">中</Font><Font Color="#0089FF">国</Font><Font Color="#0070FF">人</Font><Font Color="#0056FF">,</Font> <Font Color="#0024FF">我</Font><Font Color="#000BFF">们</Font><Font Color="#1400FF">爱</Font><Font Color="#3500FF">自</Font><Font Color="#5700FF">己</Font><Font Color="#7800FF">的</Font><Font Color="#9A00FF">祖</Font><Font Color="#BB00FF">国</Font><Font Color="#DD00FF">。</Font><Font Color="#FF00FF">”</Font>
</Font>
</div>
<div style="width: 260px; height: 88px"><Font Size=3 Face="楷体_GB2312"><Font Color="#FF00FF">横</Font><Font Color="#DA00FF">向</Font><Font Color="#B400FF">的</Font><Font Color="#8F00FF">数</Font><Font Color="#6900FF">据</Font><Font Color="#4400FF">全</Font><Font Color="#1E00FF">部</Font><Font Color="#0005FF">显</Font><Font Color="#0021FF">示</Font><Font Color="#003EFF">的</Font><Font Color="#005AFF">时</Font><Font Color="#0076FF">候</Font><Font Color="#0092FF">就</Font><Font Color="#00AFFF">由</Font><Font Color="#00C0F0">上</Font><Font Color="#00C0CB">往</Font><Font Color="#00C0A5">下</Font><Font Color="#00C080">竖</Font><Font Color="#00C05A">着</Font><Font Color="#00C035">排</Font><Font Color="#00C00F">列</Font><Font Color="#16C000">由</Font><Font Color="#3CC000">左</Font><Font Color="#61C000">向</Font><Font Color="#87C000">右</Font><Font Color="#ACC000">滚</Font><Font Color="#D2C000">动</Font><Font Color="#F7C000">了</Font><Font Color="#FFAA00">,</Font><Font Color="#FF8E00">偶</Font><Font Color="#FF7100">需</Font><Font Color="#FF5500">要</Font><Font Color="#FF3900">一</Font><Font Color="#FF1D00">条</Font><Font Color="#FF0000">信</Font><Font Color="#FF1C00">息</Font><Font Color="#FF3800">一</Font><Font Color="#FF5400">条</Font><Font Color="#FF7000">信</Font><Font Color="#FF8D00">息</Font><Font Color="#FFA900">的</Font><Font Color="#F8C000">出</Font><Font Color="#D2C000">,</Font><Font Color="#ADC000">要</Font><Font Color="#87C000">么</Font><Font Color="#62C000">就</Font><Font Color="#3CC000">是</Font><Font Color="#17C000">由</Font><Font Color="#00C00F">下</Font><Font Color="#00C034">向</Font><Font Color="#00C05A">上</Font><Font Color="#00C07F">。</Font></Font></div>
<div style="width: 260px; height: 88px"><Font Size=3 Face="楷体_GB2312">站长资源库提供编程源码、网站源码、网页素材、书籍教程、网站模板、网页特效代码等,做有质量的学习型源码下载站。
</Font>
</div>
</div>
<script>
var Mar = document.getElementById("Marquee");
var child_div=Mar.getElementsByTagName("div")
var picH = 90;//移动高度
var scrollstep=3;//移动步幅,越大越快
var scrolltime=20;//移动频度(毫秒)越大越慢
var stoptime=3000;//间断时间(毫秒)
var tmpH = 0;
Mar.innerHTML += Mar.innerHTML;
function start(){
	if(tmpH < picH){
		tmpH += scrollstep;
		if(tmpH > picH )tmpH = picH ;
		Mar.scrollTop = tmpH;
		setTimeout(start,scrolltime);
	}else{
		tmpH = 0;
		Mar.appendChild(child_div[0]);
		Mar.scrollTop = 0;
		setTimeout(start,stoptime);
	}
}
onload=function(){setTimeout(start,stoptime)};
</script></body>
</html>

上一个:文字滚动代码,多行滚动,按钮控制滚动,jQuery图片滚动
下一个:定制的Title文字说明效果

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,