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 相关文章推荐
Javascript 静态页面实现随机显示广告的办法
Nov 17 Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
vue组件name的作用小结
May 23 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
原生Vue 实现右键菜单组件功能
Dec 16 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
php heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
php采集速度探究总结(原创)
2008/04/18 PHP
php实现简单文件下载的方法
2015/01/30 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
js实现简易ATM功能
2020/10/27 Javascript
python实现批量下载新浪博客的方法
2015/06/15 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
Python对象转换为json的方法步骤
2019/04/25 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
PHP如何自定义函数
2016/09/16 面试题
红旗团支部事迹材料
2014/01/27 职场文书
财务人员求职自荐书范文
2014/02/10 职场文书
原材料检验岗位职责
2014/03/15 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
Nginx配置https的实现
2021/11/27 Servers