jquery模拟picker实现滑动选择效果
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：js实现简单购物车模块
下一篇：jquery实现时间选择器