代码如下:
pulloutContent[i] = new DynLayer('pullout'+i+'Content')
pulloutWindow[i] = new DynLayer('pullout'+i+'Window')
pulloutWindow[i].slideInit()
pulloutScroll[i] = new MiniScroll(pulloutWindow[i],pulloutContent[i])
}
pulloutShown = 0
}
function pulloutStart(i) {
if (i!=pulloutShown) {
pulloutActive = true
pulloutWindow[pulloutShown].slideTo(-285,null,15,15,'pulloutEnd('+i+')')
}
}
function pulloutEnd(i) {
pulloutShown = i
pulloutWindow[i].slideTo(0,null,15,15,'pulloutActive==false')
}
//-->
</SCRIPT>
<STYLE type=text/css>A {
FONT-SIZE: 10pt; COLOR: #000000; FONT-FAMILY: 'Arial'
}
A.scroll {
COLOR: #ffffff
}
STRONG {
FONT-WEIGHT: bold; FONT-SIZE: 15pt; LINE-HEIGHT: 25pt; FONT-FAMILY: 'Arial'
}
P {
FONT-SIZE: 10pt; LINE-HEIGHT: 13pt; FONT-FAMILY: 'Arial'
}
#pulloutInterface {
LEFT: 200px; WIDTH: 400px; CLIP: rect(0px 400px 250px 0px); POSITION: absolute; TOP: 150px; HEIGHT: 250px; BACKGROUND-COLOR: #000000; layer-background-color: #000000
}
#pullout0Sidebar {
LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute; TOP: 5px; HEIGHT: 30px; BACKGROUND-COLOR: #dedede; layer-background-color: #DEDEDE
}
#pullout1Sidebar {
LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute; TOP: 40px; HEIGHT: 30px; BACKGROUND-COLOR: #c5c5c5; layer-background-color: #C5C5C5
}
#pullout2Sidebar {
LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute; TOP: 75px; HEIGHT: 30px; BACKGROUND-COLOR: #a2a2a2; layer-background-color: #A2A2A2
}
#pullout3Sidebar {
LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute; TOP: 110px; HEIGHT: 30px; BACKGROUND-COLOR: #7e7e7e; layer-background-color: #7E7E7E
}
#pullout4Sidebar {
LEFT: 5px; WIDTH: 100px; CLIP: rect(0px 100px 30px 0px); POSITION: absolute; TOP: 145px; HEIGHT: 30px; BACKGROUND-COLOR: #7e7e7e; layer-background-color: #7E7E7E
}
#pulloutUpDown {
LEFT: 5px; POSITION: absolute; TOP: 200px
}
#pulloutViewArea {
LEFT: 110px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 5px; HEIGHT: 240px; BACKGROUND-COLOR: #000000; layer-background-color: #000000
}
#pullout0Window {
LEFT: 0px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #dedede; layer-background-color: #DEDEDE
}
#pullout0Content {
LEFT: 5px; WIDTH: 275px; POSITION: absolute; TOP: 0px
}
#pullout1Window {
LEFT: -285px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #c5c5c5; layer-background-color: #C5C5C5
}
#pullout1Content {
LEFT: 5px; WIDTH: 275px; POSITION: absolute; TOP: 0px
}
#pullout2Window {
LEFT: -285px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #a2a2a2; layer-background-color: #A2A2A2
}
#pullout2Content {
LEFT: 5px; WIDTH: 275px; POSITION: absolute; TOP: 0px
}
#pullout3Window {
LEFT: -285px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #7e7e7e; layer-background-color: #7E7E7E
}
#pullout3Content {
LEFT: 5px; WIDTH: 275px; POSITION: absolute; TOP: 0px
}
#pullout4Window {
LEFT: -285px; WIDTH: 285px; CLIP: rect(0px 285px 240px 0px); POSITION: absolute; TOP: 0px; HEIGHT: 240px; BACKGROUND-COLOR: #7e7e7e; layer-background-color: #7E7E7E
}
#pullout4Content {
LEFT: 5px; WIDTH: 275px; POSITION: absolute; TOP: 0px
}
</STYLE>
<DIV id=pulloutInterface>
<DIV id=pullout0Sidebar>
<P align=center><A href="javascript:pulloutStart(0)">第一页</A></P></DIV>
<DIV id=pullout1Sidebar>
<P align=center><A href="javascript:pulloutStart(1)">第二页</A></P></DIV>
<DIV id=pullout2Sidebar>
<P align=center><A href="javascript:pulloutStart(2)">第三页</A></P></DIV>
<DIV id=pullout3Sidebar>
<P align=center><A href="javascript:pulloutStart(3)">第四页</A></P></DIV>
<DIV id=pullout4Sidebar>
<P align=center><A href="javascript:pulloutStart(4)">第五页</A></P></DIV>
<DIV id=pulloutUpDown><A onmouseup=pulloutScroll[pulloutShown].stop()
class=scroll onmousedown=pulloutScroll[pulloutShown].up()
onmouseout=pulloutScroll[pulloutShown].stop()
href="javascript://%20Scroll%20Up">向上</A> <BR><A
onmouseup=pulloutScroll[pulloutShown].stop() class=scroll
onmousedown=pulloutScroll[pulloutShown].down()
onmouseout=pulloutScroll[pulloutShown].stop()
href="javascript://%20Scroll%20Down">向下</A> </DIV>
<DIV id=pulloutViewArea>
<DIV id=pullout0Window>
<DIV id=pullout0Content>
<DIV align=center><STRONG>第一页</STRONG></DIV>
<TABLE width=275 border=0>
<TBODY>
<TR>
<TD>
<P>This is item number 0. This text is here to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here to
fill up space.</P></TD></TR></TBODY></TABLE></DIV></DIV>
<DIV id=pullout1Window>
<DIV id=pullout1Content>
<DIV align=center><STRONG>第二页</STRONG></DIV>
<TABLE width=275 border=0>
<TBODY>
<TR>
<TD>
<P>This is item number 1. This text is here to fill up space. This is item
number 1. This text is here to fill up space. This is item number 1. This
text is here to fill up space. This is item number 1. This text is here to
fill up space.</P>
<P>This is item number 1. This text is here to fill up space. This is item
number 1. This text is here to fill up space. This is item number 1. This
text is here to fill up space. This is item number 1. This text is here to
fill up space.</P>
<P>This is item number 1. This text is here to fill up space. This is item
number 1. This text is here to fill up space. This is item number 1. This
text is here to fill up space. This is item number 1. This text is here to
fill up space.</P>
<P>This is item number 1. This text is here to fill up space. This is item
number 1. This text is here to fill up space. This is item number 1. This
text is here to fill up space. This is item number 1. This text is here to
fill up space.</P>
<P>This is item number 1. This text is here to fill up space. This is item
number 1. This text is here to fill up space. This is item number 1. This
text is here to fill up space. This is item number 1. This text is here to
fill up space.</P>
<P>This is item number 1. This text is here to fill up space. This is item
number 1. This text is here to fill up space. This is item number 1. This
text is here to fill up space. This is item number 1. This text is here to
fill up space.</P></TD></TR></TBODY></TABLE></DIV></DIV>
<DIV id=pullout2Window>
<DIV id=pullout2Content>
<DIV align=center><STRONG>第三页</STRONG></DIV>
<TABLE width=275 border=0>
<TBODY>
<TR>
<TD>
<P>This is item number 2. This text is here to fill up space. This is item
number 2. This text is here to fill up space. This is item number 2. This
text is here to fill up space. This is item number 2. This text is here to
fill up space.</P>
<P>This is item number 2. This text is here to fill up space. This is item
number 2. This text is here to fill up space. This is item number 2. This
text is here to fill up space. This is item number 2. This text is here to
fill up space.</P>
<P>This is item number 2. This text is here to fill up space. This is item
number 2. This text is here to fill up space. This is item number 2. This
text is here to fill up space. This is item number 2. This text is here to
fill up space.</P>
<P>This is item number 2. This text is here to fill up space. This is item
number 2. This text is here to fill up space. This is item number 2. This
text is here to fill up space. This is item number 2. This text is here to
fill up space.</P>
<P>This is item number 2. This text is here to fill up space. This is item
number 2. This text is here to fill up space. This is item number 2. This
text is here to fill up space. This is item number 2. This text is here to
fill up space.</P>
<P>This is item number 2. This text is here to fill up space. This is item
number 2. This text is here to fill up space. This is item number 2. This
text is here to fill up space. This is item number 2. This text is here to
fill up space.</P></TD></TR></TBODY></TABLE></DIV></DIV>
<DIV id=pullout3Window>
<DIV id=pullout3Content>
<DIV align=center><STRONG>第四页</STRONG></DIV>
<TABLE width=275 border=0>
<TBODY>
<TR>
<TD>
<P>This is item number 0. This text is here to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here to
fill up space.</P></TD></TR></TBODY></TABLE></DIV></DIV>
<DIV id=pullout4Window>
<DIV id=pullout4Content>
<DIV align=center><STRONG>第五页</STRONG></DIV>
<TABLE width=275 border=0>
<TBODY>
<TR>
<TD>
<P>This is item number 0. This text is here to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here to
fill up space.</P>
<P>This is item number 0. This text is here to fill up space. This is item
number 0. This text is here to fill up space. This is item number 0. This
text is here to fill up space. This is item number 0. This text is here to
fill up
space.</P></TD></TR></TBODY></TABLE></DIV></DIV></DIV></DIV>
<body bgcolor="#ffffff" onload=init()>
[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]
转自: http://goaler.xicp.net/Article/ShowArticle.asp?ID=474