主题:  滚动效果如何做出来

嘻哈标明

职务:普通成员
等级:1
金币:1.0
发贴:173
#12005/10/26 22:04:23

图片如下:


像这样的滚动效果如何做出来呢,要求ie和firefox都能正常运行



whirlwind

职务:普通成员
等级:1
金币:0.0
发贴:94
#22005/10/26 22:24:44
那不是滚动效果,而是仿qq菜单,参见
search.blueidea.com/?q=qq%e8%8f%9c%e5%8d%95&bisearch=bbs



嘻哈标明

职务:普通成员
等级:1
金币:1.0
发贴:173
#32005/10/27 23:21:03
如果动态生成呢?两级就够了



苦寒竹

职务:普通成员
等级:1
金币:0.0
发贴:10
#42005/10/29 8:29:09
以前做过,div就是



苦寒竹

职务:普通成员
等级:1
金币:0.0
发贴:10
#52005/10/29 8:30:08
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Netstart v1.0</title>
<STYLE type=text/css>
a { font-size: 10pt; color: #000000;behavior:url('kuhanzhu.htc');text-decoration: none}
a:hover { font-size: 10pt; color: #FF0000; text-decoration: none}
a:hover { font-size: 10pt; color: #FF0000; text-decoration: none}
a:visited { font-size: 10pt; text-decoration: none}
.titleStyle {
    BORDER-TOP: #ffffff 1px solid; FONT-SIZE: 9pt; CURSOR: hand; COLOR: #ffffff; BACKGROUND-COLOR: #90C040
}
.contentStyle {
    FONT-SIZE: 9pt; COLOR:blue; BACKGROUND-COLOR: #eeffee
    }
BODY {
    FONT-SIZE: 9pt
}
</STYLE>
<base target=_blank>
</head>

<BODY scroll=no topmargin="0" leftmargin="0"oncontextmenu="return false" ><table><tr><td>
<SCRIPT language=javascript>
<!--
var layerTop=0; //菜单顶边距
var layerLeft=0; //菜单左边距
var layerWidth=140; //菜单总宽
var titleHeight=20; //标题栏高度
var contentHeight=200; //内容区高度
var stepNo=10; //移动步数,数值越大移动越慢

var itemNo=0;runtimes=0;
document.write('<span id=itemsLayer style="position:absolute;overflow:hidden;border:1px solid #856BF2;left:'+layerLeft+';top:'+layerTop+';width:'+layerWidth+';">');

function addItem(itemTitle,itemContent){
itemHTML='<div id=item'+itemNo+' itemIndex='+itemNo+' style="position:relative;left:0;top:'+(-contentHeight*itemNo)+';width:'+layerWidth+';"><table width=100% cellspacing="0" cellpadding="0">'+
'<tr><td height='+titleHeight+' onclick=changeItem('+itemNo+') class="titleStyle" align=center>'+itemTitle+'</td></tr>'+
'<tr><td height='+contentHeight+' class="contentStyle">'+itemContent+'</td></tr></table></div>';
document.write(itemHTML);
itemNo++;
}
//添加菜单标题和内容,可任意多项,注意格式:
addItem('置顶','<center><a href="../main/Soft/goldtool.rar">金牌电脑工具箱</a><BR><BR><a href="http://www.eniacjia.com/download/DietMP3.zip">MP3压缩器</a><BR><a href="http://www.feilang.net/bbs/"></a> <BR><a href="http://www.odbopp.com/"></a><BR><a href="http://www.onlyradio.org/"></a><BR><a href="#"></a><BR><a href="#"></a><BR><a href="#"></a></center>');
addItem('我的网址','<center><a href="http://www.kanunu.net">卡努努</a><BR><BR><a href="http://www.voc107.com">城市之声</a><BR><a href="http://www.feilang.net/bbs/">飞浪考网论坛</a> <BR><a href="http://www.odbopp.com/">绿芒果设计</a><BR><a href="http://www.onlyradio.org/">唯音网络电台</a><BR><a href="#"></a><BR><a href="#"></a><BR><a href="#"></a></center>');
addItem('技术论坛','<center><a href="#">正在建设中</a><BR><BR><a href="#"></a><BR><BR><a href="#"></a> <BR><BR><a href="#"></a></center>');
addItem('流行音乐','<center><a href="hudie.html">梁祝——《蝴蝶》</a> <BR><BR><a href="xiangqishui.html">当你孤单你会想起谁</a><BR><BR><a href="#"></a> <BR><BR><a href="#"></a></center>');
addItem('每月推荐','<center><a href="http://freehost11.websamba.com/kuhanzhu/rainforestfull.rar">热带雨林屏保</a><BR><BR><a href="http://freehost09.websamba.com/ittools/pingbao/fish.rar">热带鱼屏保</a> <BR><BR><a href="http://freehost09.websamba.com/ittools/pingbao/ButterflyGarden.rar">蝴蝶花园屏保</a> <BR><BR><a href="http://freehost09.websamba.com/ittools/pingbao/Waterworld.rar">深海水世界屏保</a><BR><BR><a href="http://freehost09.websamba.com/ittools/pingbao/konglong.rar">恐龙屏保</a><BR><BR><a href="http://freehost09.websamba.com/ittools/pingbao/autumnleaves.rar">秋天的落叶</a></center>');
addItem('在线广播','<center><a href="http://www.bmr.com.cn/script/live.ram">北京音乐台</a><br><a href="mms://video.zjonline.com.cn/voc107/voc107.asx">城市之声</a><br><a href="mms://vstream.sina.com.cn/900">音乐之声</a></center>');

document.write('</span>')
document.all.itemsLayer.style.height=itemNo*titleHeight+contentHeight;

toItemIndex=itemNo-1;onItemIndex=itemNo-1;

function changeItem(clickItemIndex){
toItemIndex=clickItemIndex;
if(toItemIndex-onItemIndex>0) moveUp(); else moveDown();
runtimes++;
if(runtimes>=stepNo){
onItemIndex=toItemIndex;
runtimes=0;}
else
setTimeout("changeItem(toItemIndex)",10);
}

function moveUp(){
for(i=onItemIndex+1;i<=toItemIndex;i++)
eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)-contentHeight/stepNo;');
}

function moveDown(){
for(i=onItemIndex;i>toItemIndex;i--)
eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)+contentHeight/stepNo;');
}
changeItem(0);
//-->
</SCRIPT><br><br><br><br><br><br><br><br><br><br><br><br><br><br>rf<br><br><br><br></td></tr><tr><td><table border="1" cellpadding="0" cellspacing="0" width="100%"
bordercolorlight="#000000" bordercolordark="#ffffff"
bgcolor="#e7e7e7"><tr><td><a href=http://www.hosen.zj.com>首页</a></td><td><a href="http://freehost11.websamba.com/kuhanzhu/liuyanben/index.asp?user=kuhanzhu">留言</a></td><td><a href=reg.asp>申请</a></td><td><a href=about.html>关于</a></td></tr></table></td></tr></table>
</body>

</html>

这是我以前弄的,自己研究下吧



嘻哈标明

职务:普通成员
等级:1
金币:1.0
发贴:173
#62005/10/29 22:16:36
太好了,在firefox也能通过.
现在要告诉的是怎么动态实现,就是从数据库里得到数据。



gina211

职务:普通成员
等级:1
金币:0.0
发贴:1
#72005/11/5 3:25:34
xiexie



嘻哈标明

职务:普通成员
等级:1
金币:1.0
发贴:173
#82005/11/13 14:01:42
kuhanzhu的代码我试过了,但是有个问题....比如像我发的图..如果"基本信息"有几条连接(就是按钮吧)..他不会自动生成滚动条..有办法能实现吗?