jquery模擬picker實現(xiàn)滑動選擇效果

更新時間：2021年04月27日 09:37:08 作者：Bright2017

這篇文章主要為大家詳細介紹了jquery模擬picker實現(xiàn)滑動選擇效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jquery模擬picker實現(xiàn)滑動選擇效果的具體代碼，供大家參考，具體內(nèi)容如下

代碼：

<!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>請選擇發(fā)票內(nèi)容</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>
          營養(yǎng)快線
         </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">
   // 監(jiān)聽滾動事件
       var scroll_index=0;//默認index
       const $ScrollWrap = $(".billing_select_center>ul")
       // 監(jiān)聽滾動停止
       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;
          // 區(qū)間在 30 ~ 60 之間則選中 這個區(qū)間范圍是根據(jù)高度來決定的
          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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: