本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容