jQuery自定义下拉框插件

收藏

本文演示了8种不同的querySelector下拉框插件效果。只要定义 select的class即可。是个简单但功能强大的下拉框select插件。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

引入select相关插件

<link rel="stylesheet" type="text/css" href="css/cs-select.css" />
<link rel="stylesheet" type="text/css" href="css/cs-skin-border.css" />
<script src="js/classie.js"></script>
<script src="js/selectFx.js"></script>
<script>
    (function() {
        [].slice.call(document.querySelectorAll('select.cs-select')).forEach(function(el) {
            new SelectFx(el);
        });
    })();
</script>

演示一：边框，只要定义select 加上class： cs-skin-border

<select class="cs-select cs-skin-border">
    <option value="" disabled selected> 联系人方式</option>
    <option value="email">E-Mail</option>
    <option value="twitter">Twitter</option>
    <option value="linkedin">LinkedIn</option>
</select>

演示二：下划线

<select class="cs-select cs-skin-underline">

演示三：伸缩动画效果

<select class="cs-select cs-skin-elastic">

演示四：滑动效果

<select class="cs-select cs-skin-slide">

演示五：覆盖

<select class="cs-select cs-skin-overlay">

演示六：旋转

<select class="cs-select cs-skin-rotate">

演示七：选择颜色

<select class="cs-select cs-skin-boxes">

演示八：环形效果

<select class="cs-select cs-skin-circular">