jQuery自定義漂亮的下拉框插件8種效果


jquery美化選擇器實例有:邊框、下划線 伸縮 滑動 覆蓋 旋轉 彈出層選擇 環形效果。



 

 

在線預覽

 

實例代碼

<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>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM