文字循环向上滚动效果 / 学生王国

站内搜索：

您现在的位置：首页 > 电脑 > 应用技巧 > 正文

文字循环向上滚动效果
学生王国 ∥ http://www.xswg.com 更新时间:2007年1月9日	调整字体：大中小

文字循环向上滚动效果：

<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 scrollup(o,d,c){
	if(d==c){
		var t=o.firstChild.cloneNode(true);
		o.removeChild(o.firstChild);o.appendChild(t);
		t.style.marginTop=o.firstChild.style.marginTop='0px';
		hscroll(o);
	}
	else{
		ch=false;var s=3,c=c+s,l=(c>=d?c-d:0);
		o.firstChild.style.marginTop=-c+l+'px';
		window.setTimeout(function(){scrollup(o,d,c-l)},50);
	}
}

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);
}

function hs(o,d,c,p){
	c++;var t=(c>0?-c:c);o.firstChild.style.marginLeft=t+'px';
	if(c==d){if(d==0){tc=window.setTimeout(function(){hs(o,p,0,p)},2500);}else tc=window.setTimeout(function(){hs(o,0,-p,p)},3500);}
	else tc=window.setTimeout(function(){hs(o,d,c,p)},5);
}
</script>
</head>

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

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

转载：http://bbs.blueidea.com/thread-2711046-1-1.html

发贴人：风动人

相关链接：

来自：蓝色理想
编辑：
浏览：

查看全部评论

您的评论

请您注意：
1.请遵守《中国互联网行业自律条款》及中华人民共和国其他各项有关法律法规。
2.严禁发表危害国家安全、损害国家利益、破坏民族团结、破坏国家宗教政策、破坏社会稳定、侮辱、诽谤、教唆、淫秽等内容的评论。
3.用户需对自己在使用本站服务过程中的行为承担法律责任（直接或间接导致的）。
4.本站管理员有权保留或删除评论内容。
评论内容只代表网友个人观点，与本网站立场无关。