最代码广告位
jiangzaiwu的gravatar头像
jiangzaiwu2012-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
最代码最近下载分享源代码列表最近下载
2283422031 LV42019年7月22日
月亮
木水包 LV162018年8月17日
太阳
MOCAIHONG LV12018年7月28日
星星
2062611528 LV12017年9月6日
星星
吴梦尧 LV22016年12月26日
星星星星
dagf113225 LV682016年4月28日
皇冠月亮
whlong789 LV12016年3月21日
星星
5243 LV12015年5月31日
星星
Junkies LV12015年3月9日
星星
975896497 LV22015年1月3日
星星星星
最代码最近浏览分享源代码列表最近浏览
sonofy123 LV82月14日
月亮月亮
77329TT LV162月8日
太阳
a1365220876 LV12月2日
星星
lishi11111 LV91月27日
月亮月亮星星
12603075411月4日
暂无贡献等级
yuanwjk LV42019年12月28日
月亮
hjh844615 LV32019年12月25日
星星星星星星
2027587467 LV52019年12月20日
月亮星星
l柳林658 LV32019年12月19日
星星星星星星
zzyf111 LV12019年12月12日
星星
顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友