JS+CSS实现美化的下拉列表框效果

本文实例讲述了JS+CSS实现美化的下拉列表框效果。分享给大家供大家参考。具体如下：
一款经过JS+CSS美化的下拉列表，效果很不错，但代码有点偏多，学习CSS的朋友可以学习一下方法，然后自己变通一下，把代码简化一下。
运行效果如下图所示：
具体代码如下：
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JS+CSS下拉列表</title><style type="text/css">body{ font-size:12px; margin:0}.center{ margin-left:auto; margin-right:auto; margin-top:200px; width:300px;}#age_sel_2 div.tag_select{display:block;color:#000;width:62px;height:22px;background:transparent url（"http://files.jb51.net/file_images/article/201508/2015811145849095.gif"） no-repeat 0 0;padding:0 10px;line-height:22px;}#age_sel_2 div.tag_select_hover{display:block;color:#000;width:62px;height:22px;background:transparent url（"http://files.jb51.net/file_images/article/201508/2015811145849095.gif"） no-repeat 0 -22px;padding:0 10px;line-height:22px;}#age_sel_2 div.tag_select_open{display:block;color:#000;width:62px;height:22px;background:transparent url（"http://files.jb51.net/file_images/article/201508/2015811145849095.gif"） no-repeat 0 -44px;padding:0 10px;line-height:22px;}#age_sel_2 ul.tag_options{position:absolute;margin:0;list-style:none;background:transparent url（"http://files.jb51.net/file_images/article/201508/2015811145849095.gif"） no-repeat left bottom;padding:0 0 1px;margin:0;width:60px;}#age_sel_2 ul.tag_options li{background:transparent url（"http://files.jb51.net/file_images/article/201508/2015811145849095.gif"） repeat-y -102px 0;display:block;width:61px;padding:0 10px;height:22px;text-decoration:none;line-height:22px;color:#000;}#age_sel_2 ul.tag_options li.open_hover{background:transparent url（"http://files.jb51.net/file_images/article/201508/2015811145849095.gif"） no-repeat 0 -88px;color:#000}#age_sel_2 ul.tag_options li.open_selected{background:transparent url（"http://files.jb51.net/file_images/article/201508/2015811145849095.gif"） no-repeat 0 -66px;color:#19555F}</style><script>var selects = document.getElementsByTagName（"select"）;var isIE = （document.all && window.ActiveXObject && ！window.opera） ? true : false;function $（id） { return document.getElementById（id）;}function stopBubbling （ev） {ev.stopPropagation（）;}function rSelects（） { for （i=0;i<selects.length;i++）{ selects[i].style.display = "none"; select_tag = document.createElement（"div"）;select_tag.id = "select_" + selects[i].name;select_tag.className = "select_box"; selects[i].parentNode.insertBefore（select_tag,selects[i]）; select_info = document.createElement（"div"）; select_info.id = "select_info_" + selects[i].name;select_info.className="tag_select";select_info.style.cursor="pointer"; select_tag.appendChild（select_info）; select_ul = document.createElement（"ul"）; select_ul.id = "options_" + selects[i].name;select_ul.className = "tag_options";select_ul.style.position="absolute";select_ul.style.display="none";select_ul.style.zIndex="999"; select_tag.appendChild（select_ul）; rOptions（i,selects[i].name）; mouseSelects（selects[i].name）; if （isIE）{selects[i].onclick = new Function（"clickLabels3（""+selects[i].name+""）;window.event.cancelBubble = true;"）; } else if（！isIE）{selects[i].onclick = new Function（"clickLabels3（""+selects[i].name+""）"）;selects[i].addEventListener（"click", stopBubbling, false）; }}}function rOptions（i, name） { var options = selects[i].getElementsByTagName（"option"）; var options_ul = "options_" + name; for （n=0;n<selects[i].options.length;n++）{option_li = document.createElement（"li"）;option_li.style.cursor="pointer";option_li.className="open"; $（options_ul）.appendChild（option_li）; option_text = document.createTextNode（selects[i].options[n].text）; option_li.appendChild（option_text）; option_selected = selects[i].options[n].selected; if（option_selected）{option_li.className="open_selected";option_li.id="selected_" + name;$（"select_info_" + name）.appendChild（document.createTextNode（option_li.innerHTML））; } option_li.onmouseover = function（）{ this.className="open_hover";} option_li.onmouseout = function（）{if（this.id=="selected_" + name）{this.className="open_selected";}else {this.className="open";} }option_li.onclick = new Function（"clickOptions（"+i+","+n+",""+selects[i].name+""）"）; }}function mouseSelects（name）{ var sincn = "select_info_" + name; $（sincn）.onmouseover = function（）{ if（this.className=="tag_select"） this.className="tag_select_hover"; } $（sincn）.onmouseout = function（）{ if（this.className=="tag_select_hover"） this.className="tag_select"; } if （isIE）{ $（sincn）.onclick = new Function（"clickSelects（""+name+""）;window.event.cancelBubble = true;"）; } else if（！isIE）{ $（sincn）.onclick = new Function（"clickSelects（""+name+""）;"）; $（"select_info_" +name）.addEventListener（"click", stopBubbling, false）; }}function clickSelects（name）{ var sincn = "select_info_" + name; var sinul = "options_" + name;for （i=0;i<selects.length;i++）{if（selects[i].name == name）{if（ $（sincn）.className =="tag_select_hover"）{$（sincn）.className ="tag_select_open";$（sinul）.style.display = "";}else if（ $（sincn）.className =="tag_select_open"）{$（sincn）.className = "tag_select_hover";$（sinul）.style.display = "none";} } else{$（"select_info_" + selects[i].name）.className = "tag_select";$（"options_" + selects[i].name）.style.display = "none"; } }}function clickOptions（i, n, name）{var li = $（"options_" + name）.getElementsByTagName（"li"）; $（"selected_" + name）.className="open"; $（"selected_" + name）.id=""; li[n].id="selected_" + name; li[n].className="open_hover"; $（"select_" + name）.removeChild（$（"select_info_" + name））; select_info = document.createElement（"div"）; select_info.id = "select_info_" + name; select_info.className="tag_select"; select_info.style.cursor="pointer"; $（"options_" + name）.parentNode.insertBefore（select_info,$（"options_" + name））; mouseSelects（name）; $（"select_info_" + name）.appendChild（document.createTextNode（li[n].innerHTML））; $（ "options_" + name ）.style.display = "none" ; $（ "select_info_" + name ）.className = "tag_select"; selects[i].options[n].selected = "selected";}window.onload = function（e） { bodyclick = document.getElementsByTagName（"body"）.item（0）; rSelects（）; bodyclick.onclick = function（）{ for （i=0;i<selects.length;i++）{ $（"select_info_" + selects[i].name）.className = "tag_select";$（"options_" + selects[i].name）.style.display = "none"; } }}</script></head><body><div class="center"><div id="age_sel_2"> <select name="area_selet2" id="area_select2"><option value="请选择">请选择</option><option value="ASP" >ASP</option><option value="PHP" >PHP</option><option value=".NET" >.NET</option><option value="Csharp" >Csharp</option><option value="Delphi" >Delphi</option><option value="Java" >Java</option> </select></div></div></body></html>
希望本文所述对大家的javascript程序设计有所帮助。