ALI-LILI

导航

 

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

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


  在线预览

 1 <body class="demo-1">
 2         <div class="container">
 3             <header class="codrops-header">
 4                 <h1> 自定义选择元素</h1>
 5                 <nav class="codrops-demos">
 6                     <a class="current-demo" href="index.html">边框</a>
 7                     <a href="index2.html">下划线</a>
 8                     <a href="index3.html">伸缩</a>
 9                     <a href="index4.html">滑动</a>
10                     <a href="index5.html">覆盖</a>
11                     <a href="index6.html">旋转</a>
12                     <a href="index7.html">弹出层选择</a>
13                     <a href="index8.html">环形效果</a>
14                 </nav>
15             </header>
16             <section>
17                 <select class="cs-select cs-skin-border">
18                     <option value="" disabled selected> 联系人方式</option>
19                     <option value="email">E-Mail</option>
20                     <option value="twitter">Twitter</option>
21                     <option value="linkedin">LinkedIn</option>
22                 </select>
23             </section>
24  
25         </div><!-- /container -->
26         <script src="js/classie.js"></script>
27         <script src="js/selectFx.js"></script>
28         <script>
29             (function() {
30                 [].slice.call(document.querySelectorAll('select.cs-select')).forEach(function(el) {
31                     new SelectFx(el);
32                 });
33             })();
34         </script>
35     </body>

我是雷锋,拿走不谢!^_^

 

posted on 2016-11-20 21:45  ALI-LILI  阅读(1027)  评论(0编辑  收藏  举报