js实现select选择框效果及美化


Posted in Javascript onAugust 19, 2016

网上有各种各样的关于 select 选择框的美化,找了很多,并没有好的样式效果。所以就找了一个利用 ul li 做的类似 select 选择框的效果,不废话了,先上图,效果如下:

js实现select选择框效果及美化

点击一个 test ,就会把列表显示出来,再次点击,列表隐藏,选择一个 li ,就会把 span 里的内容替换成 li 的内容,然后可以用 js 监控 span 的变化,然后执行你的代码。效果如下: 

html 代码如下: 

<div id="type" class="test">
 <span>投资种类</span>
 <ul class="dropdown">
 <li>期货</li>
 <li>股票</li>
 <li>期权</li>
 </ul>
</div>
<div id="kind" class="test">
 <span>投资类型</span>   
 <ul class="dropdown">
 <li>趋势</li>
 <li>震荡</li>
 <li>套利</li>
 <li>选股</li>
 <li>择时</li>
 </ul>
</div>

css 代码如下: 

ul li{
 list-style: none;
}
.test {
 position: relative;
 float: left;
 width: 120px;
 height: 40px;
 padding-left: 11px;
 font-size: 15px;
 line-height: 40px;
 cursor: pointer;
 border: 1px solid #d2d2d2;
 border-radius: 3px;
 margin-right: 20px;
 outline: none;
}
.test:before {
 position: absolute;
 right: 13px;
 top: 18px;
 width: 0;
 height: 0;
 content: "";
 border-width: 8px 8px 0 8px;
 border-style: solid;
 border-color: #d36969 transparent;
 -webkit-transition: transform .25s;
 -moz-transition: transform .25s;
 -ms-transition: transform .25s;
  -o-transition: transform .25s;
  transition: transform .25s;
}
.test:after {
 position: absolute;
 right: 15px;
 top: 18px;
 width: 0;
 height: 0;
 content: "";
 border-width: 6px 6px 0 6px;
 border-style: solid;
 border-color: #fff transparent;
 -webkit-transition: all .25s;
 -moz-transition: all .25s;
 -ms-transition: all .25s;
  -o-transition: all .25s;
  transition: all .25s;
}
.test.active:before{
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg); 
}
.test.active:after{
 top: 20px;
 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg); 
}
.test .dropdown {
 position: absolute;
 right: 0;
 left: 0;
 display: none;
 padding: 0;
 border-radius: inherit;
 border: 1px solid #d2d2d2;
 box-shadow: 2px 2px 5px rgba(0,0,0,.4);
}
.test.active .dropdown {
 display: block;
}
.test .dropdown:before {
 position: absolute;
 right: 13px;
 bottom: 100%;
 width: 0;
 height: 0;
 content: "";
 border-width: 0 8px 8px 8px;
 border-style: solid;
 border-color: #d2d2d2 transparent;
}
.test .dropdown:after {
 position: absolute;
 right: 15px;
 bottom: 100%;
 width: 0;
 height: 0;
 content: "";
 border-width: 0 6px 6px 6px;
 border-style: solid;
 border-color: #fff transparent;
}
.test .dropdown li {
 float: left;
 width: 129px;
 font-size: 14px;
 -webkit-transition: all .3s ease-out;
 -moz-transition: all .3s ease-out;
 -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
 text-align: center;
}
.test .dropdown li:first-of-type {
 border-radius: 3px 3px 0 0;
}
.test .dropdown li:last-of-type {
 border-radius: 0 0 3px 3px;
}
.test .dropdown li:hover {
 color: #fff;
 background: #c43c3d;
}

对于 :before 和 :after 两个伪元素不理解可以去看看我上篇博客 点击这里

js 代码如下: 

function DropDown(el) {
 this.dd = el;
 this.span = this.dd.children('span');
 this.li = this.dd.find('ul.dropdown li');
 this.val = '';
}
DropDown.prototype.initEvents = function() {
 var obj = this;
 obj.dd.on('click', function(event){
 $(this).toggleClass('active').siblings().removeClass('active');
 event.stopPropagation();
 });
 obj.li.on('click', function() {
 var opt = $(this);
 obj.val = opt.html();
 if (obj.span.html() == obj.val) return;   
 obj.span.html(obj.val);
 $(document).click(function() {
  $('.test').removeClass('active');
 });
 })
}
var test1 = new DropDown($('#type'));
var test2 = new DropDown($('#kind'));
test1.initEvents();
test2.initEvents()

这里使用构造-原型组合模式来创建了一个 DropDown 对象,构造-原型组合模式解释:属性写在构造函数中,是表示每个实例独有的属性,让对象具体化;方法写在构造函数外,是为了表示每个实例共享的方法。 

但是这里有点不好的方法是,已限制了 html 的布局。

精彩专题分享:javascript选择框操作汇总    jquery选择框操作汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 篱式条件判断
Aug 22 Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 Javascript
js this 绑定机制深入详解
Apr 30 Javascript
JavaScript面向对象编写购物车功能
Aug 19 #Javascript
javascript设计模式之module(模块)模式
Aug 19 #Javascript
JS实现六位字符密码输入器功能
Aug 19 #Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 #Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 #Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 #Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 #Javascript
You might like
用mysql内存表来代替php session的类
2009/02/01 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
jQuery timers计时器简单应用说明
2010/10/28 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
使用python BeautifulSoup库抓取58手机维修信息
2013/11/21 Python
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
Python Django view 两种return的实现方式
2020/03/16 Python
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
继电保护工岗位职责
2014/01/05 职场文书
酒店总经理岗位职责
2014/03/17 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python