首页>>表单>>简单的select美化 模拟select效果(2022-02-15)

简单的select美化 模拟select效果

简单的select美化 模拟select效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="drop">  
  2.     <div class="option active placeholder" data-value="placeholder">选择一个</div>  
  3.     <div class="option" data-value="wow">湖北</div>  
  4.     <div class="option" data-value="drop">上海</div>  
  5.     <div class="option" data-value="select">广东</div>  
  6.     <div class="option" data-value="custom">浙江</div>  
  7.     <div class="option" data-value="animation"> 江苏</div>  
  8. </div>  

 

XML/HTML Code
  1. <script type="text/javascript">  
  2. $(document).ready(function() {  
  3.   $(".drop .option").click(function() {  
  4.     var val = $(this).attr("data-value"),  
  5.         $drop = $(".drop"),  
  6.         prevActive = $(".drop .option.active").attr("data-value"),  
  7.         options = $(".drop .option").length;  
  8.     $drop.find(".option.active").addClass("mini-hack");  
  9.     $drop.toggleClass("visible");  
  10.     $drop.removeClass("withBG");  
  11.     $(this).css("top");  
  12.     $drop.toggleClass("opacity");  
  13.     $(".mini-hack").removeClass("mini-hack");  
  14.     if ($drop.hasClass("visible")) {  
  15.       setTimeout(function() {  
  16.         $drop.addClass("withBG");  
  17.       }, 400 + options*100);   
  18.     }  
  19.     triggerAnimation();  
  20.     if (val !== "placeholder" || prevActive === "placeholder") {  
  21.       $(".drop .option").removeClass("active");  
  22.       $(this).addClass("active");  
  23.     };  
  24.   });  
  25.     
  26.   function triggerAnimation() {  
  27.     var finalWidth = $(".drop").hasClass("visible") ? 22 : 20;  
  28.     $(".drop").css("width", "24em");  
  29.     setTimeout(function() {  
  30.       $(".drop").css("width", finalWidth + "em");  
  31.     }, 400);  
  32.   }  
  33. });  
  34. </script>  

 


原文地址:http://www.freejs.net/article_biaodan_931.html