jquery模拟picker滑动选择效果

网页中用到过的效果 同时被 2 个专栏收录
118 篇文章 0 订阅
25 篇文章 0 订阅

<!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>

 

  • 1
    点赞
  • 1
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏

Bright2017

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值