会员
周边
众包
新闻
博问
闪存
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
让心灵去旅行
幸福是旅程,而不是终点
博客园
首页
新随笔
联系
订阅
管理
模仿QQ的菜单滚动效果
<
html
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=gb2312"
>
<
title
>
模仿QQ的滚动菜单效果
</
title
>
<
style
type
="text/css"
>
.titleStyle
{
}
{
background-color
:
#FFC0FF
;
color
:
#000000
;
border-top
:
1px solid #FFFFFF
;
font-size
:
9pt
;
cursor
:
hand
;
}
.contentStyle
{
}
{
background-color
:
#FFF0FF
;
color
:
#666699
;
font-size
:
9pt
;
}
a
{
}
{
color
:
#666699
;
}
body
{
}
{
font-size
:
9pt
;
}
</
style
>
</
head
>
<
body
>
<
script
language
="JavaScript"
>
<!--
var
layerTop
=
20
;
//
top
var
layerLeft
=
20
;
//
left
var
layerWidth
=
140
;
//
total width
var
titleHeight
=
20
;
//
title height
var
contentHeight
=
260
;
//
contend height
var
stepNo
=
20
;
//
step no
var
itemNo
=
0
;
runtimes
=
0
;
document.write('
<
span id
=
itemsLayer style
=
"
position:absolute;overflow:hidden;border:1px solid
#ffc0ff;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
"
valign
=
"
top
"
>
'
+
itemContent
+
'
</
td
></
tr
></
table
></
div
>
';
document.write(itemHTML);
itemNo
++
;
}
//
all contend
addItem('Welcome','
<
BR
>
welcome!');
addItem('栏目1','
<
BR
><
center
><
a href
=
"
#
"
>
子菜单A1
</
a
>
<
BR
><
BR
><
a href
=
"
#
"
>
子菜单A2
</
a
>
<
BR
><
BR
><
a
href
=
"
#
"
>
子菜单A3
</
a
>
<
BR
><
BR
><
a href
=
"
#
"
>
更多
</
a
></
center
>
');
addItem('栏目2','
<
BR
><
center
><
a href
=
"
#
"
>
子菜单B1
</
a
>
<
BR
><
BR
><
a href
=
"
#
"
>
子菜单B2
</
a
>
<
BR
><
BR
><
a href
=
"
#
"
>
子菜单B3
</
a
>
<
BR
><
BR
><
a href
=
"
#
"
>
更多..
</
a
></
center
>
');
addItem('栏目3','
<
BR
><
center
><
a href
=
"
#
"
>
子菜单C1
</
a
>
<
BR
><
BR
><
a href
=
"
#
"
>
子菜单C2
</
a
>
<
BR
><
BR
><
a
href
=
"
#
"
>
子菜单B3
</
a
>
<
BR
><
BR
><
a href
=
"
#
"
>
更多..
</
a
></
center
>
');
addItem('栏目4','
<
BR
><
center
><
a href
=
"
#
"
>
子菜单D1
</
a
>
<
BR
><
BR
><
a href
=
"
#
"
>
子菜单D2
</
a
>
<
BR
><
BR
><
a
href
=
"
#
"
>
更多..
</
a
></
center
>
');
addItem('栏目5','
<
BR
><
center
><
a href
=
"
#
"
>
子菜单E1
</
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
/
s
tepNo;');
}
function
moveDown()
{
for
(i
=
onItemIndex;i
>
toItemIndex;i
--
)
eval('document.all.item'
+
i
+
'.style.top
=
parseInt(document.all.item'
+
i
+
'.style.top)
+
contentHeight
/
s
tepNo;');
}
changeItem(
0
);
//
-->
</
script
>
</
body
>
</
html
>
posted @
2005-07-01 14:17
让心灵去旅行
阅读(
731
) 评论(
0
)
编辑
收藏
举报
会员力量,点亮园子希望
刷新页面
返回顶部
公告