打印

一个很简洁得滚动效果，有点意思

cityvoice [楼主]

高级会员

帖子: 291
体力: 550
威望: 48
当前: 上海普陀
离线: 55 天

1^# 大中小发表于 2006-12-25 16:14

今天回答一个网友的问题时，忽然想到这个效果，原来滚动也可以这么做。代码非常简洁。
注：由于FF允许空白节点，所以吧UL,LI节点写到一行了，不然要用代码清除掉空白节点。

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

[ 本帖最后由 cityvoice 于 2006-12-26 11:37 编辑 ]

TOP

西部数码港台主机新上线即买即用 | 211工程高起专、高起本、专升本

xiaolabi

中级会员

帖子: 177
体力: 382
威望: 0
离线: 616 天

2^# 大中小发表于 2006-12-25 16:50

这种效果能用在哪呢？

www.jy17.com

TOP

PSD网页模板下载,高端实用 | 微软 visual studio 2010 专题

cityvoice [楼主]

高级会员

帖子: 291
体力: 550
威望: 48
当前: 上海普陀
离线: 55 天

3^# 大中小发表于 2006-12-25 16:54

只要是不连续得滚动都可以用到

你要是用图片做子节点，就可以看到很熟悉得滚动效果了。

TOP

网站设计新思路——水晶石教育 | 优质低价Flex就业培训

chongyang1014

中级会员

帖子: 163
体力: 408
威望: 0
离线: 976 天

4^# 大中小发表于 2006-12-25 17:11

楼主说的对，setInterval("xx()",1000);效果还可以

★重阳工作室★

TOP

cityvoice [楼主]

高级会员

帖子: 291
体力: 550
威望: 48
当前: 上海普陀
离线: 55 天

5^# 大中小发表于 2006-12-25 17:22

研究代码还真有乐趣，看看这个连续滚动是不是也很简洁

完全是标准写法，应该支持其它浏览器

<!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>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
#container{width:300px; height:100px; margin:0px; overflow:hidden; font-size:12px}
#container div{height:20px}
</style>
<script type="text/javascript">
var tt;
function scroll(){
	var h = parseInt(container.firstChild.style.marginTop) * -1;
	if(isNaN(h)) h = 0;
	if(h==0){
		var clonenode = container.firstChild.cloneNode(true);
		container.appendChild(clonenode);
		container.firstChild.style.marginTop = "-1px"; 
		tt=setInterval("scroll()",100);
	}else if(h>0 && h < container.firstChild.offsetHeight){
		container.firstChild.style.marginTop = (h + 1)* -1 + "px"; 
    }else{
		container.removeChild(container.firstChild);
		clearInterval(tt);
		scroll();
	}
	
}
</script>
</head>
<body>
<div id="container" onmouseover="clearInterval(tt)" onmouseout="tt=setInterval('scroll()',100);"><div>第一个</div><div>第二个</div><div>第三个</div><div>第四个</div><div>第五个</div></div>
<input type="button" name="bt" value="滚动" onclick="scroll();">
<input type="text" name="view">
</body>
</html>

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

[ 本帖最后由 cityvoice 于 2006-12-26 10:26 编辑 ]

本帖最近评分记录

Sheneyan 威望 +1 原创内容 2006-12-26 10:19

TOP

sunland

艾丽丝

高级会员

帖子: 497
体力: 559
威望: 0
当前: 陕西咸阳
离线: 457 天

6^# 大中小发表于 2006-12-25 17:23

学习中....

http://www.Apeman.com.cn

TOP

Sheneyan

子虚乌有

荣誉管理团队

认证
帖子: 8360
体力: 19643
威望: 187
当前: 江苏苏州
离线: 10 天

专长 JS,JAVA,Oracle

7^# 大中小发表于 2006-12-26 10:19

如果节点内容较多的话，你每次removeChild和appendChild操作都会是一个比较久的过程。。。

想法不错，打分～

子叶：子乌的叶子

TOP

roypo

初级会员

帖子: 68
体力: 93
威望: 0
当前: 香港香港
离线: 76 天

专长 网页设计,前端制作,PHP

8^# 大中小发表于 2007-1-30 12:16

引用:

原帖由 cityvoice 于 2006-12-25 17:22 发表
完全是标准写法，应该支持其它浏览器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html ...

FF用不了，但刪除了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">這一行就行了...

I'm stupid in stupid...