jQuery simulates picker to achieve sliding selection effect

This article shares the specific code of jQuery to simulate picker to achieve the sliding selection effect for your reference. The specific content is as follows

Code:

<!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>Please select the invoice content</div>
        <img src="img/icon36.png" alt="..." />
       </div>
       <div class="billing_select_center">
        <ul>
         <li class="billing_opacity">
          Beverages
         <li>
          Drinks
         <li>
          Wang Laoji</li>
         <li>
          Lao Baigan
         <li>
          Nutrition Express
         <li>
          Pulse
        </ul>
        <div class="billing_select_border"></div>
        <div class="billing_select_border2"></div>
       </div>
       <div class="billing_select_bot">
        OK
      </div>
     </div>
    </div>
  
  <script src="js/jq.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   // Listen for scroll events var scroll_index=0; //Default index
       const $ScrollWrap = $(".billing_select_center>ul")
       // Listen for scrolling stop let t1 = 0;
       let t2 = 0;
       let timer = null; // timer$ScrollWrap.on("touchstart", function() {
        // touch start ≈ scroll start})
       $ScrollWrap.on("scroll", function() {
        //Scroll clearTimeout(timer)
        timer = setTimeout(isScrollEnd, 100)
        t1 = $ScrollWrap.scrollTop()
       })
   
       function isScrollEnd() {
        t2 = $ScrollWrap.scrollTop();
        if (t2 == t1) {
         //Scrolling stops clearTimeout(timer)
         // Get the distance between each li and the top border 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;
          // If the range is between 30 and 60, the range selected is determined by the height 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");
         // Scroll to the corresponding position and each li height is 47px
         var scrool_heg = k * 47;
         $(".billing_select_center>ul").scrollTop(scrool_heg);
          }
         }
        }
       }
       
  </script>
 </body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: