中文字幕免费精品_亚洲视频自拍_亚洲综合国产激情另类一区_色综合咪咪久久

這篇文章主要為大家介紹了javascript自定義select下拉框美化特效的相關(guān)資料,需要的朋友可以參考下

select的默認(rèn)樣式往往很丑，為保證頁面樣式風(fēng)格統(tǒng)一，需要對(duì)select進(jìn)行美化。雖然其美化的插件很多，一搜一大把，但是需要引入長(zhǎng)長(zhǎng)的css文件和js文件實(shí)在是件頭痛的事。其實(shí)select的實(shí)現(xiàn)原理很簡(jiǎn)單，就是一個(gè)點(diǎn)擊 切換 顯示和隱藏 并傳值 的過程。用jquery模擬了，樣式想怎么寫就怎么寫，且不限數(shù)量。

樸素的效果：

html：

<div class="select_box">

    <font>›</font>

    <span>選項(xiàng)1</span>

  <ul>

   <li>選項(xiàng)1</li>

   <li>選項(xiàng)2</li>

   <li>選項(xiàng)3</li>       

  </ul>

 </div> 

 <div class="select_box">

    <font>›</font>

    <span>選項(xiàng)一</span>

  <ul>

   <li>選項(xiàng)一</li>

   <li>選項(xiàng)二</li>

   <li>選項(xiàng)三</li>       

  </ul>

 </div>

css：

ul{ margin:0; padding:0; list-style:none;}

.select_box{ width:200px; height:36px; border:1px solid #3CF; position:relative; float:left; margin-right:50px;}

.select_box span{ display:inline-block; width:200px; height:36px; line-height:36px; cursor:pointer; text-indent:10px;}

.select_box .span_aa{ color:#C36;}

.select_box ul{ width:200px; position:absolute; top:36px; left:-1px; border:1px solid #3CF; display:none; background:#fff;}

.select_box li{ cursor:pointer; line-height:36px; text-indent:10px;}

.select_box li:hover{ background:#39F; color:#fff;}

.select_box font{ position:absolute; right:10px; font-size:26px; font-family:"微軟雅黑"; color:#3CF; transform:rotate(90deg);} 

js：

$(function(){

   var s_title=$(".select_box span");

   var s_select=$(".select_box li");

   s_title.click(function(e){

     $(this).addClass("span_aa");

     $(this).next("ul").show();

     e.stopPropagation();

     });    

   s_select.click(function(){

     var s_text=$(this).html();

     var s_title_2=$(this).parent('ul').prev("span");

     s_title_2.html(s_text).removeClass("span_aa");

     $(this).parent('ul').hide();    

     });

   $(document).click(function(){

     s_title.removeClass("span_aa");

     $(".select_box ul").hide();    

     }); 

});

源碼下載：js select下拉框美化下載

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。