jquery模擬picker實現滑動選擇效果
阿新 • • 發佈：2021-04-28
本文例項為大家分享了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/cs程式設計客棧s"> 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_se程式設計客棧lect_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 { www.cppcns.comwidth: 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> &http://www.cppcns.comlt;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++) { vhttp://www.cppcns.comar 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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。