js自定义select下拉框美化特效


Posted in Javascript onMay 12, 2016

select的默认样式往往很丑,为保证页面样式风格统一,需要对select进行美化。虽然其美化的插件很多,一搜一大把,但是需要引入长长的css文件和js文件实在是件头痛的事。其实select的实现原理很简单,就是一个点击 切换 显示和隐藏 并传值 的过程。用jquery模拟了,样式想怎么写就怎么写,且不限数量。

朴素的效果:

js自定义select下拉框美化特效

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(){

  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下拉框美化下载

如果大家还想深入学习,可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
IE和Firefox下event事件杂谈
Dec 18 Javascript
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 Javascript
js命名空间写法示例
Dec 18 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
深入理解angularjs过滤器
May 25 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 #Javascript
JS函数的定义与调用方法推荐
May 12 #Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 #Javascript
JS定义类的六种方式详解
May 12 #Javascript
值得分享和收藏的Bootstrap学习教程
May 12 #Javascript
jQuery中$.each()函数的用法引申实例
May 12 #Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 #Javascript
You might like
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
PHP 的几个配置文件函数
2006/12/21 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
python查询mysql中文乱码问题
2014/11/09 Python
python计算圆周率pi的方法
2015/07/11 Python
Python函数式编程
2017/07/20 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
Python WSGI的深入理解
2018/08/01 Python
Python中的取模运算方法
2018/11/10 Python
flask session组件的使用示例
2018/12/25 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
耐克中国官方商城:Nike中国
2018/10/18 全球购物
小学教师读书活动总结
2014/07/08 职场文书
珍惜资源的建议书
2014/08/26 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
先进集体申报材料
2014/12/25 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书