经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › 文字循环向上滚动效果

查看: 5237|回复: 7

文字循环向上滚动效果 [复制链接]

风动人　楼主

中级会员

帖子: 171
体力: 450
威望: 3

发表于 2007-1-8 01:02:36 |显示全部楼层

好久没来blueidea，发个自己Blog上转过来的东东：）

文字循环向上滚动效果：

<html>
<head>
<title> SCROLL </title>
<style type="text/css">
#infozone{font-size:12px;color:#aa6;overflow:hidden;width:100px;height:20px;}
#infozone div{height:20px;line-height:20px;white-space:nowrap;overflow:hidden;}
</style>
<script type="text/javascript">
var tc;
window.onload=function(){
	var o=document.getElementById('infozone');hscroll(o);
	window.setInterval(function(){window.clearTimeout(tc);o.firstChild.style.marginLeft='0px';scrollup(o,20,0);},10000);
}

function hscroll(o){
	var w1=o.firstChild.offsetWidth,w2=o.offsetWidth;
	if(w1<=w2)return;
	tc=window.setTimeout(function(){hs(o,w1-w2,0,w1-w2)},3500);
}

<body>
<div id="infozone"><div>温岚 - 屋顶(周杰伦 对唱版)</div><div>范玮琪 - 那些花儿</div><div>张韶涵 - 娃娃</div><div>孙楠&韩红 - 美丽的神话</div></div>
</body>
</html>

提示：您可以先修改部分代码再运行

兼容IE和FF

已有 1 人评分	威望	收起理由
marvellous	+ 2	我很赞同

总评分: 威望 + 2 查看全部评分

Go: http://www.taounion.com/

西部数码顶级域名注册商39元抢注！

使用道具举报

marvellous　

金翅擘海

钻石会员

帖子: 16559
体力: 37158
威望: 143

发表于 2007-1-8 01:34:22 |显示全部楼层

我记得以前蓝色经典首页有一个显示一行的小公告栏，定时左、右、上、下翻动，好像跟上面楼主这个效果类似，不知怎么做的？

┏┯┓┏┯┓┏┯┓┏┯┓
┠知┨┠往┨┠观┨┠来┨
┗┷┛┗┷┛┗┷┛┗┷┛

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

风动人　楼主

中级会员

帖子: 171
体力: 450
威望: 3

发表于 2007-1-8 01:37:10 |显示全部楼层

8知哦，呵呵。
反正我无聊的时候经常写这些东东，再来一个：）

<html>
<head>
<title> 随便玩玩 </title>
<script type="text/javascript">
<!--
function gogogo(){
	var w=window;
	function g(i){return w.document.getElementById(i);}

var f=g('playframe256xszfsa');

function setStyle(n,x,y,s){
		with (n.style){
			width=s+'px';
			height=s+'px';
			border='1px solid #abc';
			backgroundColor='#def';
			margin=1;
			position='absolute';
			left=x;
			top=y;
			overflow='hidden';
		}
	}

function hitIt(i,s,t,c){
		g('o'+i).style.backgroundColor=c;
		s*=4;i+=s;i--;i%=s;
		g('o'+i).style.backgroundColor='#def';
		i+=2;i%=s;
		setTimeout(function(){hitIt(i,s/4,t,c);}, t);
	}

function showHelp(c1,c2){
		if(g('help').innerHTML==c1)
			g('help').innerHTML=c2;
		else
			g('help').innerHTML=c1;
		setTimeout(function(){showHelp(c1,c2);},3000);
	}

w=window.open('', 'playframe256xszfsa');
	w.document.body.innerHTML='<div id="playzone" style="border: 1px solid yellow"><div id="help" style="color:  #aaa; font-size: 14px; text-align: center; margin: 20px"></div></div>';
	var s=20, n=10;
	with(w.document.body.style){
		margin=0;
		overflow='hidden';
		border=0;
	}
	with(f.style){
		display='block';
		border=0;
		width=height=(n+1)*(s+1)+3;
	}
	mkTrack(s,g('playzone'),n);
	hitIt(5,s,10,'blue');
	hitIt(0,s,10,'red');
	flash(g('playzone'),2000);
	showHelp('救命啊!!!', '你是跑不掉滴，hiahia~~');
}
//-->
</script>
</head>

提示：您可以先修改部分代码再运行

Go: http://www.taounion.com/

使用道具举报