打印

文字循环向上滚动效果

风动人 [楼主]

中级会员

帖子: 170
体力: 443
威望: 3
离线: 818 天

1^# 大中小发表于 2007-1-8 01:02

好久没来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 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>

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

兼容IE和FF

本帖最近评分记录

marvellous 威望 +2 我很赞同 2007-1-8 01:19

Go: http://hily.iyi.cn/

TOP

西部数码VPS主机1G内存仅266元

marvellous

金翅擘海

荣誉管理团队

帖子: 13287
体力: 27867
威望: 143
当前: 北京朝阳区

2^# 大中小发表于 2007-1-8 01:34

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

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

TOP

广州周立功诚聘—平面/网页/UI/工业设计师 | 天业互联-酷睿租用599￥

风动人 [楼主]

中级会员

帖子: 170
体力: 443
威望: 3
离线: 818 天

3^# 大中小发表于 2007-1-8 01:37

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

<html>
<head>
<title> 随便玩玩 </title>
<script type="text/javascript">

</script>
</head>
<body>
<iframe id="playframe256xszfsa" name="playframe256xszfsa" onload="gogogo()" style="display: none" src="about:blank"></iframe>
</body>
</html>

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

Go: http://hily.iyi.cn/

TOP

认证您的手机，获得手机认证图标

，更多手机认证的好处

marvellous

金翅擘海

荣誉管理团队

帖子: 13287
体力: 27867
威望: 143
当前: 北京朝阳区

4^# 大中小发表于 2007-1-8 01:45

做得不错，就是闪得太厉害，你可以来多搞点原创得冬冬，我给你加分。

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

TOP

用CSS布局建站从零开始 | Photoshop中打造史诗般梦幻场景 | 05年第一次软件行业创业的惨痛教训

风动人 [楼主]

中级会员

帖子: 170
体力: 443
威望: 3
离线: 818 天

5^# 大中小发表于 2007-1-8 01:46

……呵呵，工作后都没时间啦，我们不可以版聊哦：）

Go: http://hily.iyi.cn/

TOP

xinruby02

高级会员

帖子: 302
体力: 672
威望: 0
当前: 山东济南
离线: 4 天

专长 网页设计,UI,Flash

6^# 大中小发表于 2007-1-8 13:18

喜欢这个东东
真希望自己也能编写这样的效果

TOP

fenghp

初级会员

帖子: 98
体力: 156
威望: 0
当前: 广东佛山

7^# 大中小发表于 2007-1-8 13:37

很喜欢这种效果~~蛮不错的~~

TOP

cndudu

新手上路

帖子: 10
体力: 27
威望: 0
离线: 32 天

8^# 大中小发表于 2008-5-11 12:13

第一个代码文字循环向上滚动效果

第一个代码文字循环向上滚动效果
鼠标放上去.文字还在动.
能不能鼠标放上去.文字就不动了,停住.鼠标移走,它再动?

TOP

文字循环向上滚动效果

第一个代码 文字循环向上滚动效果

第一个代码文字循环向上滚动效果