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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jquery实现鼠标拖拽滑动效果来选择数字的方法
本文实例讲述了jquery实现鼠标拖拽滑动效果来选择数字的方法.分享给大家供大家参考.具体如下: 这是使用jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns
-
基于jQuery滑动杆实现购买日期选择效果
这是一款基于jQuery的滑动杆购买日期选择插件,它的外观仿的是阿里云的服务器购买日期选择界面.这款jQuery插件非常适合在一些虚拟产品购买页面上使用,它可以帮助你的用户快速选择产品的购买日期,十分方便.效果图如下: 在线预览 源码下载 html代码: <center> <div class="slider-date" id="slider-date-"> <!--底层--> <ul class="slid
-
jquery手机触屏滑动拼音字母城市选择器的实例代码
今天用到城市选择,直接用拼音滑动方式来选择,用的时候引入jquery(个别样式需要自己修改) <div class="yp_indz"><img src="images/dizhi.png" alt=""><em>北京</em></div> <!--省份列表--> <div class="dzhc_xs"> <nav> <di
-
Jquery实现弹性滑块滑动选择数值插件
做了一个类似于阿里云弹性计算中的滑块效果,可以自由滑动滑块,并且计算刻度.基于jQuery实现,小伙伴们不要忘记载入jquery哦 CSS .main { margin: 0 auto; margin-top: 100px; width: 500px; font-family: 微软雅黑; -webkit-user-select: none; } .contain { width: 500px; height: 40px; background-color: #E8E8E8; } .track
-
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
-
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
本文实例讲述了jQuery模拟360浏览器切屏效果幻灯片,分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w
-
jQuery模拟实现天猫购物车动画效果实例代码
一.功能描述: 1.点击购买按钮,模拟抛物线将物品弹到购物车里: 2.购物车添加物品后,显示+1动画: 效果图如下: 实现如下: 1.导入jquery相关的包: <script type="text/javascript" src="jquery-2.1.1.min.js"></script> <script src="jquery.fly.min.js"></script> 2.html文件内容:
-
jQuery实现的经典滑动门效果
本文实例讲述了jQuery实现的经典滑动门效果.分享给大家供大家参考.具体如下: 这是一款jQuery 滑动门,从样式上来说,虽然有些古板,但已经具备了经典的滑动门功能,感兴趣的朋友可以继续美化一下界面. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-jd-hd-move-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
-
jquery模拟多级复选框效果的简单实例
今天又次体会到jquery的强大了,做了个多级复选框的效果,代码总共就20+行就over了. 我又想用js来做一个看看,才写了几个方法就写不动了,兼容性要考虑很多,而且代码量直线上升. 主要分享下jquery的这个效果的实现.代码块分两块: 一是全选的效果,就是点击全选的复选框时它的子孙都相应被选中或者未选中.这个很好做,代码如下: evtEle.parent().next(".checks").find("input:checkbox").attr("c
-
jQuery模拟Marquee实现无缝滚动效果完整实例
本文实例讲述了jQuery模拟Marquee实现无缝滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>模拟Marquee无缝滚动</title> <style type="text/css"> /* CSS Document reset */ html, body, di
-
jQuery模拟下拉框选择对应菜单的内容
先给大家展示下效果图: 下面一段代码给大家分享基于jquery实现的模拟下拉框选择对应菜单的内容,具体代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,ul,li,a,p{margin
-
jQuery实现的滑块滑动导航效果示例
本文实例讲述了jQuery实现的滑块滑动导航效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net jquery滑动导航</title> <style> *{margin: 0;padding: 0;box-sizing: border