文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯