jQuery下拉框插件8种效果

时间：2022-05-22 17:30:08

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

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

jQuery下拉框插件8种效果

在线预览

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

我是雷锋，拿走不谢！^_^

相关文章