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

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

这篇文章主要为大家详细介绍了jquery模拟picker实现滑动选择效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

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

您可能感兴趣的文章:

jquery更换文章内容与改变字体大小代码
更换文章内容与改变字体大小的方法有很多，在本文为大家介绍下使用jquery是如何实现的，感兴趣的朋友可不要错过了
2013-09-09
jQuery中的一些常见方法小结(推荐)
下面小编就为大家带来一篇jQuery中的一些常见方法小结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
ajax异步请求详解
做前端开发的朋友对于ajax异步更新一定印象深刻，本文主要介绍了关于ajax异步请求的那点事，具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
jQuery实现鼠标滑过点击事件音效试听
本文给大家介绍jquery鼠标滑过点击事件音效试听，使用jquery插件实现的特效，感兴趣的朋友一起来学习吧。
2015-08-08
PHP结合jQuery实现的评论顶、踩功能
本文给大家分享的功能是这样的：你点击一下顶或踩按钮，记录数值到数据库，并且有颜色的背景跟着变，按照百分比的变化。这样就可以通过背景颜色一眼就看清楚那边支持的人比较多。
2015-07-07
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
这篇文章主要介绍了jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法,涉及jQuery数值运算及条件判断等相关操作技巧,需要的朋友可以参考下
2019-01-01
自动适应iframe右边的高度
在开发项目过程中，用iframe嵌套，会发现一个问题，用iframe嵌套的html结构右边不会自动适应高度。如何解决这一问题呢，下面就跟小编一起来看下吧
2016-12-12
基于jQuery插件实现环形图标菜单旋转切换特效
本文给大家分享一款基于jQuery环形图标旋转切换特效。这是一款鼠标点击图标菜单圆形顺时针或者逆时针旋转切换代码。有需要的小伙伴可以参考下。
2015-05-05
jQuery实现二级导航菜单的示例
这篇文章主要介绍了jQuery实现二级导航菜单的示例，帮助大家理解和制作网页特效，感兴趣的朋友可以了解下
2020-09-09
JS中Array数组学习的总结
本文主要介绍了JS中Array数组的相关知识。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具