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>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。