jiangzaiwu的gravatar头像
jiangzaiwu 2012-10-15 10:57:42

DIV+CSS+JS仿Select下拉表单网页特效源代码下载

DIV+CSS+JS仿Select下拉表单

DIV+CSS+JS仿Select下拉表单网页特效源代码下载

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV+CSS+JS仿下拉表单</title>
<script type="text/javascript" >
function $$$$$(_sId){
 return document.getElementById(_sId);
 }
function hide(_sId)
 {$$$$$(_sId).style.display = $$$$$(_sId).style.display == "none" ? "" : "none";}
function pick(v) {
 document.getElementById('am').value=v;
hide('HMF-1')
}
function bgcolor(id){
 document.getElementById(id).style.background="#F7FFFA";
 document.getElementById(id).style.color="#000";
}
function nocolor(id){
 document.getElementById(id).style.background="";
 document.getElementById(id).style.color="#788F72";
}
</script>
<style type="text/css">
*{margin:0px; padding:0px;}
body{font-family: Arial, Helvetica, sans-serif;font-size: 12px;}
.cur{cursor:pointer; display:block;color:#788F72;width:146px; height:22px; line-height:22px; padding:0px 0px 0px 2px;}
.am{border: 0px;color:#788F72;cursor: pointer;background:#fff url('0.gif') no-repeat; width: 150px;height: 19px;margin:10px 0px 0px 10px; padding:3px 0px 0px 2px;}
.bm{border: 1px #999999 solid ;width: 148px; margin-left:10px;}
</style>
</head>
<body>
<form>
<input onclick="hide('HMF-1')" type="text" value="请选择" id="am" class="am" />
<div id="HMF-1" style="display: none " class="bm">
 <span id="a1" onclick="pick('测试一')" onMouseOver="bgcolor('a1')" onMouseOut="nocolor('a1')" class="cur">测试一</span>
 <span id="a2" onclick="pick('测试二')" onMouseOver="bgcolor('a2')" onMouseOut="nocolor('a2')" class="cur">测试二</span>
 <span id="a3" onclick="pick('测试三')" onMouseOver="bgcolor('a3')" onMouseOut="nocolor('a3')" class="cur">测试三</span>
 <span id="a4" onclick="pick('测试四')" onMouseOver="bgcolor('a4')" onMouseOut="nocolor('a4')" class="cur">测试四</span>
 <span id="a5" onclick="pick('测试五')" onMouseOver="bgcolor('a5')" onMouseOut="nocolor('a5')" class="cur">测试五</span>
 <span id="a6" onclick="pick('测试六')" onMouseOver="bgcolor('a6')" onMouseOut="nocolor('a6')" class="cur">测试六</span>
</div>
</form>
</body>
</html>

 


骑着猪猪去逛街编辑于2013-12-27 11:55:09


最代码官方编辑于2014-8-25 9:31:52


打赏

文件名:css_code.rar,文件大小:1K 下载
  • /
    • /css_code.htm
最代码最近下载分享源代码列表最近下载
yaozhaohui  LV1 2021年6月6日
Laukun921  LV9 2021年1月2日
Fireloli  LV9 2020年11月15日
lm114477  LV3 2020年3月21日
2283422031  LV4 2019年7月22日
木水包  LV16 2018年8月17日
MOCAIHONG  LV1 2018年7月28日
2062611528  LV1 2017年9月6日
吴梦尧  LV2 2016年12月26日
dagf113225  LV68 2016年4月28日
最代码最近浏览分享源代码列表最近浏览
lilu0226  LV7 1月30日
000666  LV9 2022年12月24日
ming_123_9715  LV22 2022年12月20日
wonderUU  LV5 2022年12月15日
xuthus  LV1 2022年12月8日
ye1148813923  LV1 2022年11月29日
wuyeziye  LV2 2022年11月24日
binglu360  LV2 2022年11月23日
4651564632  LV8 2022年10月25日
四小只by白丫头  LV3 2022年5月10日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友