一款經(jīng)過JS+CSS美化的下拉列表框_表單按鈕特效

一款經(jīng)過JS+CSS美化的下拉列表，效果很不錯(cuò)，但代碼有點(diǎn)偏多，學(xué)習(xí)CSS的朋友可以學(xué)習(xí)一下方法，然后自己變通一下，把代碼簡(jiǎn)化一下。

<!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" mrc="text/html; charset=gb2312" />
<title>JS+CSS下拉列表</title>

.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("/jscss/demoimg/200902/select.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("/jscss/demoimg/200902/select.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("/jscss/demoimg/200902/select.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("/jscss/demoimg/200902/select.gif") no-repeat left bottom;padding:0 0 1px;margin:0;width:60px;}
#age_sel_2 ul.tag_options li{background:transparent url("/jscss/demoimg/200902/select.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("/jscss/demoimg/200902/select.gif") no-repeat 0 -88px;color:#000}
#age_sel_2 ul.tag_options li.open_selected{background:transparent url("/jscss/demoimg/200902/select.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);
  }  
 }
}

所屬頻道：表單按鈕特效/更新時(shí)間：2013-01-06

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)表單按鈕特效：

表單按鈕特效Rss訂閱特效代碼搜索

表單按鈕特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁(yè)鏈接| 搜索一款經(jīng)過JS+CSS美化的下拉列表框
特效說明：
表單按鈕模板-一款經(jīng)過JS+CSS美化的下拉列表框。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

一款經(jīng)過JS+CSS美化的下拉列表框_表單按鈕特效

表單按鈕特效Rss訂閱特效代碼搜索

表單按鈕特效推薦

猜你也喜歡看這些