Js特效：Js实现的下拉列表框效果-中考模拟 - 常州市新北区奔牛初级中学

栏目列表

当前位置：首页>>化学家园>>习题下载>>中考模拟>>文章内容

Js特效：Js实现的下拉列表框效果

发布时间：2008-12-29 点击：来源：互联网作者：will2011

Js特效：Js实现的下拉列表框效果：代*如下：

Source Code to Run

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://{域名已经过期}/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://{域名已经过期}/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js特效：Js实现的下拉列表框效果--中国IT人才网!IT求职,IT招聘</title>
</head>
<style type="text/css">
*{ margin:0; padding:0;}
body { font-size:12px; line-height:150%;}
td{ height:22px; padding:6px;}
a{font-size:12px; color:#000000; text-decoration:none;}
a:link{color: #000000;}
a:visited{color: #000000;}
a:hover{text-decoration: underline; color:#000000;}
a:active{color:#000000;}
img{border:none;}
ul,li{ list-style-type:none;}

.search{ width:300px; margin:30px auto;}
.sel{float:right;border:solid 1px #FFC128; height:18px;width:60px;overflow:hidden;margin-top:3px;}

.option {width:50px;height:16px;padding:2px 0 0 6px;margin:0px 0 0 0px;color:#d78100;font-size:12px;line-height:14px;+line-height:16px;position:absolute;z-index:10;background:#fff url(http://{域名已经过期}/buttonbg.gif) no-repeat -645px -4px;cursor:pointer;}
#sbArea_h {width:49px;font-size:14px;color:#d78100;padding:1px 0 1px 0px;margin:18px 0 0 0px;border:#f5a429 1px solid;position:absolute;z-index:20;background:#fff;}
#sbArea_h a {float:left;color:#666; text-decoration:none;}
#sbArea_h a:hover {color:#fff;background:#f90 url(http://{域名已经过期}/buttonbg.gif) no-repeat -625px -4px;}
#sbArea_h div {float:left;width:43px;padding:2px 0 2px 5px;-padding:3px 0 0 5px;cursor:pointer;}
</style>
<script type="text/javascript">
function wValDisp(sts,idx)
{
	if(getObject("sbArea_"+ sts +"").style.display == "none")
	{
		getObject("sbArea_"+ sts +"").style.display = "";
	}
	else
	{
		getObject("sbArea_"+ sts +"").style.display = "none";
	}
}
function getObject(objectId)
{ 
	// checkW3C DOM, then MSIE 4, then NN 4. 
	if(document.getElementById && document.getElementById(objectId))
	{ 
		return document.getElementById(objectId);
	}
	else if (document.all && document.all(objectId))
	{ 
		return document.all(objectId); // IE4,5.0 
	}
	else if (document.layers && document.layers[objectId])
	{ 
		return document.layers[objectId];  // Netscape 4.x 
	}
	else
	{ 
		return false; 
	} 
}
function wValChg(idx,sts){
	if(idx == "s") getObject("wn_"+ sts +"").innerHTML = "综合";
	if(idx == "h") getObject("wn_"+ sts +"").innerHTML = "人才";
	if(idx == "j") getObject("wn_"+ sts +"").innerHTML = "职位";
	if(idx == "z") getObject("wn_"+ sts +"").innerHTML = "资讯";
	getObject("sbArea_"+ sts +"").style.display = "none";
}
function getNavigatorType()
{
	if(navigator.appName == "Microsoft Internet Explorer")
		return 1;  
	else if(navigator.appName == "Netscape")
		return 2;	
	else 
		return 0;
}
function setSelBox(event)
{
	var _event;
	switch (getNavigatorType())
	{
		case 1 : // IE
			_event = window.event;
			node = _event.srcElement;
			nodeName = _event.srcElement.className;
			break;
		case 2 : // Netscape
			_event = event;
			node = _event.target;
			nodeName = _event.target.className;
			break;
		default :
			nodeName = "None"; 
			break;
	}
	if(nodeName == "dselObj")
	{
		
	}else
	{
		try
		{
			document.getElementById("sbArea_h").style.display = "none";
		}
		catch(e){}
	}
}
document.onmousedown = setSelBox;
</script>
<body>
<div class="search">
	<div class="sel">	
		<input type="hidden" name="w" value="h"/>
		<div class="option" onClick="wValDisp('h','web');"><span id="wn_h">综合</span></div>
		<div id="sbArea_h" style="display:none;">
			<a target="_self" href="javascript:wValChg('s','h');" onFocus="blur();"><div class="dselObj" id="wv_h_0">综合</div></a>
			<a target="_self" href="javascript:wValChg('h','h');" onFocus="blur();"><div class="dselObj" id="wv_h_0">人才</div></a>
			<a target="_self" href="javascript:wValChg('j','h');" onFocus="blur();"><div class="dselObj" id="wv_h_1">职位</div></a>
			<a target="_self" href="javascript:wValChg('z','h');" onFocus="blur();"><div class="dselObj" id="wv_h_2">资讯</div></a>
		</div>
	</form>
	</div>
</div>
</body>
</html>

[可先修改部分代* 再运行查看效果]

关闭窗口

打印文档

附件：