• jQuery自定义漂亮的下拉框插件8种效果


    jquery美化选择器实例有:边框、下划线、 伸缩 、滑动、 覆盖、 旋转、 弹出层选择 、环形效果。



     

    在线预览

    实例代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <body class="demo-1">
            <div class="container">
                <header class="codrops-header">
                    <h1> 自定义选择元素</h1>
                    <nav class="codrops-demos">
                        <a class="current-demo" href="index.html">边框</a>
                        <a href="index2.html">下划线</a>
                        <a href="index3.html">伸缩</a>
                        <a href="index4.html">滑动</a>
                        <a href="index5.html">覆盖</a>
                        <a href="index6.html">旋转</a>
                        <a href="index7.html">弹出层选择</a>
                        <a href="index8.html">环形效果</a>
                    </nav>
                </header>
                <section>
                    <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>
                </section>
     
            </div><!-- /container -->
            <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>
        </body>
  • 相关阅读:
    数据库生成连续编号 前几位为零
    C#中图片与BASE64码互相转换
    C#基于Socket的CS模式的完整例子
    一个公共类
    HttpCookie 操作Cookie
    C#打包SQL数据库部署安装
    <转>遍历 进程 内的内核对象
    《windows核心编程》–Windows内存体结构(二)
    《windows核心编程》–Windows内存体结构(一)
    《windows 核心编程》 探索虚拟内存
  • 原文地址:https://www.cnblogs.com/libin-1/p/6065262.html
Copyright © 2020-2023  润新知