div+css+js仿select下拉表单的特效

div+css+js仿select下拉表单的特效

代码如下,谢谢


<title>阿里西西特效演示页,DIV+CSS+JS仿下拉表单_ www.designniu.com</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";
}


window.onload = function()
{
$$$$$("am").onmouseover = function(){window.onclick = null;}
$$$$$("am").onmouseout = function(){window.onclick = function(){$$$$$("HMF-1").style.display = "none";}}
}


</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:71px; height:22px; line-height:22px; padding:0px 0px 0px 2px; }
.am { border: 0px; color:#788F72; cursor: pointer; background: url(<a href="http://www.iresearchec.com/common/images/icon_111.jpg" target="_blank">http://www.iresearchec.com/common/images/icon_111.jpg</a>) no-repeat center center; border:1px #ccc solid; display:block; cursor:pointer; width:73px; height: 19px; margin:10px 0px 0px 10px; padding:3px 0px 0px 2px; }
.bm { border: 1px #999999 solid; width:73px; 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('设计素材http://www.designniu.com')" onMouseOver="bgcolor('a1')" onMouseOut="nocolor('a1')" class="cur">设计素材http://www.designniu.com</span>

 <span id="a2" onclick="pick('矢量素材http://www.designniu.com/vector')" onMouseOver="bgcolor('a2')" onMouseOut="nocolor('a2')" class="cur">矢量素材http://www.designniu.com/vector</span>

 <span id="a3" onclick="pick('PSD素材http://www.designniu.com/psd/')" onMouseOver="bgcolor('a3')" onMouseOut="nocolor('a3')" class="cur">PSD素材http://www.designniu.com/psd/</span>

 <span id="a4" onclick="pick('JS素材http://www.designniu.com/jslist/')" onMouseOver="bgcolor('a4')" onMouseOut="nocolor('a4')" class="cur">JS素材http://www.designniu.com/jslist/</span>  </div>

</form>


</body>

你可能感兴趣的:(js,jquery, )