js⾃定义select下拉框美化特效
select的默认样式往往很丑，为保证页⾯样式风格统⼀，需要对select进⾏美化。虽然其美化的插件很多，⼀搜⼀⼤把，但是需要引⼊长长的css⽂件和js⽂件实在是件头痛的事。其实select的实现原理很简单，就是⼀个点击切换显⽰和隐藏并传值的过程。⽤jquery模拟了，样式想怎么写就怎么写，且不限数量。
朴素的效果：
html：
<div class="select_box">
<font>›</font>
<span>选项1</span>
<ul>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
</div>
<div class="select_box">
<font>›</font>
<span>选项⼀</span>
<ul>
<li>选项⼀</li>
<li>选项⼆</li>
<li>选项三</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(){
代码运行js特效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(){
veClass("span_aa");
$(".select_box ul").hide();
});
});
源码下载：
如果⼤家还想深⼊学习，可以点击、进⾏学习。
以上就是本⽂的全部内容，希望对⼤家学习javascript程序设计有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。