最代碼廣告位
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日
星星星星
最代碼最近瀏覽分享源代碼列表最近瀏覽
lishi11111 LV9前天
月亮月亮星星
12603075411月4日
暫無貢獻等級
yuanwjk LV42019年12月28日
月亮
hjh844615 LV32019年12月25日
星星星星星星
2027587467 LV52019年12月20日
月亮星星
l柳林658 LV32019年12月19日
星星星星星星
zzyf111 LV12019年12月12日
星星
xavierliang2020 LV22019年12月1日
星星星星
風林雨紋 LV82019年11月26日
月亮月亮
wx代碼小白 LV22019年11月18日
星星星星
頂部客服微信二維碼底部
>掃描二維碼關注最代碼為好友掃描二維碼關注最代碼為好友
2008大乐透走势图