jiangzaiwu2012-10-15 10:57:42
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
猜你喜欢
请下载代码后再发表评论


Laukun921 LV91月2日
Fireloli LV32020年11月15日
lm114477 LV32020年3月21日
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日

201901230224 LV11月8日
asdhasgd LV11月6日
1814080902304 LV41月5日
Laukun921 LV91月2日
952579603 LV11月1日
wy王www LV122020年12月30日
Unsawei LV12020年12月28日
2391490703 LV42020年12月25日
Miki0921 LV72020年12月25日
shuoci174 LV12020年12月23日