<html>
<head>
<title>下拉列表框特效</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<STYLE type=text/css>
.selectBdr {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: #000000 1px solid
}
.selectedText {
FONT-SIZE: 12px; OVERFLOW: hidden; WIDTH: 100%; TEXT-INDENT: 2px; HEIGHT: 14px
}
.listText {
FONT-SIZE: 12px; TEXT-INDENT: 2pt
}
.listText2 {
FONT-SIZE: 12px; TEXT-INDENT: 2pt; BACKGROUND-COLOR: #3399cc
}
</STYLE>
<SCRIPT>
listOutSpeed=16;
function gotoUrl(sUrl){
window.open(sUrl,"","");
}
function listOut(){
if(selectedCon.listState=="close") {
selectedCon.listState="opening";
lListMask.style.visibility="visible";
lListMask.setCapture();
doListOut();
}
}
function doListOut(){
lList.style.pixelTop+=listOutSpeed;
if (lList.style.pixelTop<0) setTimeout("doListOut()",1)
else {
lList.style.pixelTop=0;
selectedCon.listState="open";
}
}
function doSelect(){
var o=event.srcElement;
lListMask.style.visibility="hidden";
lList.style.pixelTop-=lList.style.pixelHeight;
selectedCon.listState="close";
lListMask.releaseCapture();
if(o.className=="listText2") {
selectedIcon.src=o.parentElement.children(0).children(0).src;
selectedTxt.innerText=o.innerText;
gotoUrl(o.value);
}
}function doMouseOver(){
var o=event.srcElement;
if(o.className=="listText") o.className="listText2";
}function doMouseOut(){
var o=event.srcElement;
if(o.className=="listText2") o.className="listText";
}document.onmouseover=doMouseOver;
document.onmouseout=doMouseOut;
</SCRIPT>
<body bgcolor="#FFFFFF" text="#000000">
<DIV id=lselPos style="Z-INDEX: 1; LEFT: 65px; WIDTH: 21px; POSITION: absolute; TOP: 68px; HEIGHT: 38px">
<DIV id=lselect1 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 160px; POSITION: absolute; TOP: 0px; HEIGHT: 18px">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0 class=selectBdr>
<TR>
<TD width="20"><IMG id=selectedIcon height=13 src="http://www.hot4.org/java/dynamic/listmenu1/home.gif" width=13></TD>
<TD><DIV class=selectedText id=selectedTxt> 经典论坛</DIV></TD>
<TD width="13"><IMG id=selectedCon style="CURSOR: hand" onclick=listOut() height=13 src="http://www.hot4.org/java/dynamic/listmenu1/arw.gif" width=13 listState="close"></TD>
</TR></TABLE></DIV>
<DIV id=lListMask
style="Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; OVERFLOW: hidden; WIDTH: 163px; POSITION: absolute; TOP: 19px; HEIGHT: 166px"
onclick=doSelect()>
<DIV class=selectBdr id=lList
style="Z-INDEX: 2; LEFT: 0px; WIDTH: 160px; POSITION: absolute; TOP: -160px">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TR>
<TD class=listText width=142
value="http://www.blueidea.com" height="20"><img src="http://www.hot4.org/java/dynamic/listmenu1/home.gif" width="13" height="13">
网页制作</TD>
</TR>
<TR>
<TD class=listText width=142 height=20
value="http://www.51js.com"><img src="http://www.hot4.org/java/dynamic/listmenu1/home.gif" width="13" height="13">
脚本编程</TD>
</TR>
<TR>
<TD class=listText width=142 value="http://www.flashempire.com" height="20"><img src="http://www.hot4.org/java/dynamic/listmenu1/home.gif" width="13" height="13">
动画脚本</TD>
</TR>
<TR>
<TD class=listText width=142 value="http://www.5dmedia.com" height="20"><img src="http://www.hot4.org/java/dynamic/listmenu1/home.gif" width="13" height="13">
制作技术</TD>
</TR>
<TR>
<TD class=listText width=142
value="http://www.blueidea.com" height="20"><img src="http://www.hot4.org/java/dynamic/listmenu1/home.gif" width="13" height="13">
经典论坛</TD>
</TR>
<TR>
<TD class=listText width=142
value="http://www.blueidea.com/bbs" height="20"><img src="http://www.hot4.org/java/dynamic/listmenu1/home.gif" width="13" height="13">
论坛专区</TD>
</TR>
</TABLE>
</DIV></DIV></DIV>
</body>
</html>
<head>
<title>下拉列表框特效</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<STYLE type=text/css>
.selectBdr {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: #000000 1px solid
}
.selectedText {
FONT-SIZE: 12px; OVERFLOW: hidden; WIDTH: 100%; TEXT-INDENT: 2px; HEIGHT: 14px
}
.listText {
FONT-SIZE: 12px; TEXT-INDENT: 2pt
}
.listText2 {
FONT-SIZE: 12px; TEXT-INDENT: 2pt; BACKGROUND-COLOR: #3399cc
}
</STYLE>
<SCRIPT>
listOutSpeed=16;
function gotoUrl(sUrl){
window.open(sUrl,"","");
}
function listOut(){
if(selectedCon.listState=="close") {
selectedCon.listState="opening";
lListMask.style.visibility="visible";
lListMask.setCapture();
doListOut();
}
}
function doListOut(){
lList.style.pixelTop+=listOutSpeed;
if (lList.style.pixelTop<0) setTimeout("doListOut()",1)
else {
lList.style.pixelTop=0;
selectedCon.listState="open";
}
}
function doSelect(){
var o=event.srcElement;
lListMask.style.visibility="hidden";
lList.style.pixelTop-=lList.style.pixelHeight;
selectedCon.listState="close";
lListMask.releaseCapture();
if(o.className=="listText2") {
selectedIcon.src=o.parentElement.children(0).children(0).src;
selectedTxt.innerText=o.innerText;
gotoUrl(o.value);
}
}function doMouseOver(){
var o=event.srcElement;
if(o.className=="listText") o.className="listText2";
}function doMouseOut(){
var o=event.srcElement;
if(o.className=="listText2") o.className="listText";
}document.onmouseover=doMouseOver;
document.onmouseout=doMouseOut;
</SCRIPT>
<body bgcolor="#FFFFFF" text="#000000">
<DIV id=lselPos style="Z-INDEX: 1; LEFT: 65px; WIDTH: 21px; POSITION: absolute; TOP: 68px; HEIGHT: 38px">
<DIV id=lselect1 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 160px; POSITION: absolute; TOP: 0px; HEIGHT: 18px">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0 class=selectBdr>
<TR>
<TD width="20"><IMG id=selectedIcon height=13 src="http://www.hot4.org/java/dynamic/listmenu1/home.gif" width=13></TD>
<TD><DIV class=selectedText id=selectedTxt> 经典论坛</DIV></TD>
<TD width="13"><IMG id=selectedCon style="CURSOR: hand" onclick=listOut() height=13 src="http://www.hot4.org/java/dynamic/listmenu1/arw.gif" width=13 listState="close"></TD>
</TR></TABLE></DIV>
<DIV id=lListMask
style="Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; OVERFLOW: hidden; WIDTH: 163px; POSITION: absolute; TOP: 19px; HEIGHT: 166px"
onclick=doSelect()>
<DIV class=selectBdr id=lList
style="Z-INDEX: 2; LEFT: 0px; WIDTH: 160px; POSITION: absolute; TOP: -160px">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TR>
<TD class=listText width=142
value="http://www.blueidea.com" height="20"><img src="http://www.hot4.org/java/dynamic/listmenu1/home.gif" width="13" height="13">
网页制作</TD>
</TR>
<TR>
<TD class=listText width=142 height=20
value="http://www.51js.com"><img src="http://www.hot4.org/java/dynamic/listmenu1/home.gif" width="13" height="13">
脚本编程</TD>
</TR>
<TR>
<TD class=listText width=142 value="http://www.flashempire.com" height="20"><img src="http://www.hot4.org/java/dynamic/listmenu1/home.gif" width="13" height="13">
动画脚本</TD>
</TR>
<TR>
<TD class=listText width=142 value="http://www.5dmedia.com" height="20"><img src="http://www.hot4.org/java/dynamic/listmenu1/home.gif" width="13" height="13">
制作技术</TD>
</TR>
<TR>
<TD class=listText width=142
value="http://www.blueidea.com" height="20"><img src="http://www.hot4.org/java/dynamic/listmenu1/home.gif" width="13" height="13">
经典论坛</TD>
</TR>
<TR>
<TD class=listText width=142
value="http://www.blueidea.com/bbs" height="20"><img src="http://www.hot4.org/java/dynamic/listmenu1/home.gif" width="13" height="13">
论坛专区</TD>
</TR>
</TABLE>
</DIV></DIV></DIV>
</body>
</html>
