jquery模拟picker实现滑动选择效果

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文实例为大家分享了jquery模拟picker实现滑动选择效果的具体代码，供大家参考，具体内容如下

代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title></title>
  <style type="text/css">
   html,body{
    width: 100%;
    height: 100%;
   }
   div{
    box-sizing: border-box;
   }
   .flex{
    display: flex;
   }
   .billing_cent {
    width: 100%;height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    background-color: #000000;
   }
   .billing_cent_data {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
   }
   
   .billing_select {
    width: 230px;
    height: 257px;
    background: #FFFFFF;
    position: relative;
    border-radius: 3px;
   }
   
   .billing_select_top>div {
    text-align: center;
    font-size: 16px;
    color: #333333;
    padding: 20px 0;
   }
   
   .billing_select_top>img {
    width: 7px;
    height: 13px;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 3;cursor: pointer;
   }
   
   .billing_select_center {
    width: 100%;
    height: 141px;
    padding: 0 20px;
    overflow: hidden;
    position: relative;
   }
   
   .billing_select_bot {
    width: 100%;
    text-align: center;
    height: 45px;
    line-height: 45px;
    background: #EEEEEE;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    border-radius: 3px;
   }
   
   .billing_select_center>ul {
    margin: 0 auto;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 47px 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
   }
   
   .billing_select_center>ul>li {
    width: 100%;
    height: 47px;
    line-height: 47px;
    font-size: 15px;
    color: #333333;
    text-align: center;
    opacity: .5;
   }
   
   .billing_select_border {
    width: calc(100% - 40px);
    left: 20px;
    height: 1px;
    position: absolute;
    top: 47px;
    background-color: #F2F2F2;
   }
   .billing_opacity{
    opacity: 1 !important;
   }
   
   .billing_select_border2 {
    width: calc(100% - 40px);
    left: 20px;
    height: 1px;
    position: absolute;
    top: 94px;
    background-color: #F2F2F2;
   }
 
  </style>
 </head>
 <body>
  
   <div class="billing_cent">
     <div class="billing_cent_data flex">
      <div class="billing_select">
       <div class="billing_select_top">
        <div>请选择发票内容</div>
        <img src="img/icon36.png" alt="..." />
       </div>
       <div class="billing_select_center">
        <ul>
         <li class="billing_opacity">
          饮料
         </li>
         <li>
          酒水
         </li>
         <li>
          王老吉
         </li>
         <li>
          老白干
         </li>
         <li>
          营养快线
         </li>
         <li>
          脉动
         </li>
        </ul>
        <div class="billing_select_border"></div>
        <div class="billing_select_border2"></div>
       </div>
       <div class="billing_select_bot">
        确定
       </div>
      </div>
     </div>
    </div>
  
  <script src="js/jq.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   // 监听滚动事件
       var scroll_index=0;//默认index
       const $ScrollWrap = $(".billing_select_center>ul")
       // 监听滚动停止
       let t1 = 0;
       let t2 = 0;
       let timer = null; // 定时器
       $ScrollWrap.on("touchstart", function() {
        // 触摸开始 ≈ 滚动开始
       })
       $ScrollWrap.on("scroll", function() {
        // 滚动
        clearTimeout(timer)
        timer = setTimeout(isScrollEnd, 100)
        t1 = $ScrollWrap.scrollTop()
       })
   
       function isScrollEnd() {
        t2 = $ScrollWrap.scrollTop();
        if (t2 == t1) {
         // 滚动停止
         clearTimeout(timer)
         // 获取每个li距离顶部边框的距离
         var leng = $(".billing_select_center>ul>li").length;
         for (var k = 0; k < leng; k++) {
          var top_leng = $(".billing_select_center>ul").children("li").eq(k).position().top;
          // 区间在 30 ~ 60 之间则选中 这个区间范围是根据高度来决定的
          if (top_leng >= 30 && top_leng <= 60) {
           scroll_index=k;
           $("li").removeClass("billing_opacity");
           $(".billing_select_center>ul").children("li").eq(k).addClass("billing_opacity");
         // 滚动到相应位置 每个li高度 47px
         var scrool_heg = k * 47;
         $(".billing_select_center>ul").scrollTop(scrool_heg);
          }
         }
        }
       }
       
  </script>
 </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持极客世界。