上次写这个的时候的博客:http://hiuman.iteye.com/blog/2324929
上次是网上搜的,这次是自己写的。
无论多少个input都可以点击~但是只有一种内容(弹出的内容),可以修改,如果想要有多种内容需要改关联的弹出内容。
欢迎指点~
我导入的jquery是jQuery v1.9.1版本的。还加入了一个关闭的图片。
效果图:
(图片有点大。弹出的位置是正好正中间的。)
代码如下:
css:
input {
width: 100%;
height: 30px;
}
.fixed_bg {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
}
.fixed_bg .alert {
position: fixed;
top: 50%;
left: 50%;
overflow: hidden;
width: 250px;
height: 160px;
margin-top: -75px;
margin-left: -125px;
cursor: default;
border-radius: 10px;
background: #fafafa;
}
.fixed_bg .alert_title {
line-height: 40px;
position: relative;
width: 100%;
height: 40px;
text-align: center;
color: #fff;
background: #387bf0;
}
.fixed_bg .alert_title {
cursor: default;
}
.fixed_bg .alert_sure,
.fixed_bg .alert_close {
cursor: pointer;
}
.fixed_bg .alert_sure {
position: absolute;
right: 10px;
}
.fixed_bg .alert_close {
position: absolute;
left: 10px;
width: 20px;
height: 40px;
background: url('close.png') no-repeat center;
background-size: 20px;
}
.fixed_bg .alert_con {
position: relative;
width: 100%;
height: 120px;
}
.fixed_bg .alert_list_wrap {
position: absolute;
top: 8px;
left: 50%;
width: 40px;
height: 100px;
margin-left: -20px;
}
.fixed_bg .alert_list_msg {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.fixed_bg .alert_list_curr_top,
.fixed_bg .alert_list_curr_bottom {
position: absolute;
top: 33px;
width: 40px;
height: 2px;
background: red;
}
.fixed_bg .alert_list_curr_bottom {
top: 67px;
}
.fixed_bg .alert_list_msg_con {
position: absolute;
top: -68px;
width: 100%;
}
.fixed_bg .alert_list_msg_con a {
font-weight: bold;
line-height: 34px;
display: block;
width: 100%;
height: 34px;
text-align: center;
transition: top 2s;
-webkit-transition: top 2s;
/* Safari */
}
.fixed_bg .alert_list_msg_descr {
position: absolute;
top: 0;
left: -1px;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(rgb(245, 245, 245)), color-stop(.48, rgba(245, 245, 245, 0)), color-stop(.52, rgba(245, 245, 245, 0)), to(rgb(245, 245, 245)));
}
input {
margin-bottom: 10px;
}
js:
var content = ''
function setInputVal() {
var conTop = parseInt($('.fixed_bg .alert_list_msg_con').css('top')); // 34 0 -34
var temp = conTop - 68; // temp --> -34 -68 ...
var conIndex = -(temp / 34); // conIndex --> 1 2
$('#curr').text(Math.round(conIndex));
$('#curr').attr('data-msg', (68 - conIndex * 34)); // conTop
content = $($('.fixed_bg .alert_list_msg_con a')[Math.round(conIndex - 1)]).text();
}
setInputVal()
var oInputGroup = $('input.choose');
oInputGroup.each(function() {
oInputGroup.unbind('click').bind('click', function() {
var _this = this;
$('.fixed_bg').css('display', 'block');
eventListen()
$('.alert_close').unbind('click').bind('click', function() {
$('.fixed_bg').css('display', 'none')
setInputVal()
$(_this).val(content)
})
$('.alert_sure').unbind('click').bind('click', function() {
$('.fixed_bg').css('display', 'none')
setInputVal()
$(_this).val(content)
})
})
})
function eventListen() {
var aLength = $('.fixed_bg .alert_list_msg_con a').length;
var sign = '';
var sMoveStart = ''; //鼠标按下
$(window).on("mousedown", function(event) {
if (sign == "mouseup" || sign == '') {
sign = "mousedown";
sMoveStart = event.screenY;
$(window).mousemove(function(event) {
// top =(68-index*34)
if (sign == "mousedown") {
var currIndex = $('#curr').text();
var currTop = $('#curr').attr('data-msg');
sMoveLenth = event.screenY - sMoveStart;
// console.log(sMoveLenth);
var moveheight = Math.round(sMoveLenth / 34);
var temp = currTop - sMoveLenth;
var resultIndex = currIndex - moveheight;
if (resultIndex <= 0) {
currIndex = 1
currTop = 68 - (currIndex) * 34;
} else if (resultIndex >= aLength) {
currIndex = aLength
currTop = 68 - currIndex * 34;
} else {
currIndex -= moveheight
currTop = parseInt(currTop) + parseInt(sMoveLenth);
}
$('.alert_list_msg_con').css('top', currTop + 'px')
}
})
}
})
$(window).mouseup(function() {
if (sign == "mousedown") {
sign = "mouseup"
setInputVal()
var conIndex = $('#curr').text()
$('.alert_list_msg_con').css('top', (68 - conIndex * 34) + 'px')
}
})
}
html:
<body onselectstart="return false;" style="-moz-user-select:none;">
<input id="inputOne" class="choose" type="text" placeholder="请选择">
<input id="inputTwo" class="choose" type="text" placeholder="请选择">
<div class="fixed_bg">
<div class="alert">
<span id="curr" data-msg="" style="display: none;"></span>
<div class="alert_title"><span class="alert_close"></span>请选择<span class="alert_sure">确定</span></div>
<div class="alert_con">
<div class="alert_list_wrap">
<div class="alert_list_msg">
<div class="alert_list_msg_con">
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
<a>6</a>
<a>7</a>
<a>8</a>
</div>
<div class="alert_list_msg_descr"></div>
</div>
<div class="alert_list_curr_top"></div>
<div class="alert_list_curr_bottom"></div>
</div>
</div>
</div>
</div>
</body>
- 大小: 7 KB
- 大小: 4.2 KB
- 大小: 1.9 KB
分享到:
相关推荐
uview2.0实现picker省市区选择以及默认选择
<title>Picker by ustbhuangyi , initial-scale=1,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <h1 class="project-name">Picker <h2 class="project-tagline">h5 picker inspired by ios ...
本文介绍了vue学习之mintui picker选择器实现省市二级联动示例,分享给大家,具体如下: Mint UI 使用文档:https://mint-ui.github.io/docs/#/zh-cn2 Popup弹出框介绍:...
NumberPicker是Android SDK提供的一种可以滚动选择数字的控件,它允许用户通过上下滚动条来选择一个特定的数值。在XML布局文件中,我们可以直接添加NumberPicker元素,并设置其最小值、最大值和初始值: ```xml ...
城市选择插件“city-picker”是一款广泛应用于网页开发中的组件,它主要功能是为用户提供一个交互式的、方便快捷的城市选择界面。在当前信息化社会中,无论是电商网站、地图服务还是各种本地生活应用,都需要这样的...
在uni-app框架中,lb-picker选择器是一种常用的交互组件,用于实现用户在多个选项中进行选择的功能。这个组件是基于JavaScript和Vue.js技术构建的,适用于移动应用开发,特别是那些需要用户输入特定信息如日期、时间...
"el-data-picker季度区间选择器"就是这样一个组件,它专为基于ElementUI 2.15.8和Vue.js 2框架的应用设计。这个组件允许用户方便地选取特定时间范围内的季度,提高用户在数据过滤、检索或分析时的效率。 ElementUI...
在Android开发中,`NumberPicker` 是一个非常实用的组件,通常用于实现用户选择数字的交互,例如设置日期、时间或者进行数值选择。本篇文章将深入探讨如何自定义`NumberPicker`,特别是如何修改选中内容的颜色和其他...
daterangepicker,日期选择控件,3中选择 1.只到年月日,2.只要时分秒,3全要。 bootstrap2 和3 版本都有,看index.html 引入相应的js,css即可,再复制黏贴核心代码即可! 好用请评价哈
微信小程序实现自定义Picker选择器弹窗内容是指在微信小程序中实现自定义的Picker选择器弹窗内容,满足开发者对选择器弹窗内容的个性化需求。本文将详细介绍微信小程序实现自定义Picker选择器弹窗内容的方法和技术...
在Android开发中,`NumberPicker`是一个非常有用的组件,它允许用户通过上下滚动来选择一个数值。这个组件常用于设置日期、时间或者选择特定数量等场景。本篇文章将深入探讨`NumberPicker`的使用方法、属性配置以及...
在微信小程序开发中,UI组件的选择器`picker`是一个常用的功能,它允许用户从一系列选项中进行选择。本文将深入探讨如何实现一个专门用于选择年、月、日、时、分、秒的`picker`组件,以提升用户体验并增强应用程序的...
城市选择插件“city-picker”是一款广泛应用于网页开发中的组件,尤其在处理涉及地理位置和区域选择的场景下显得尤为重要。这款插件基于JavaScript和jQuery库,使得在网页上实现便捷的城市、区县、街道级别的选择变...
微信小程序的Picker组件是开发者在构建用户界面时经常会用到的一个功能组件,它主要用于实现下拉选择器的效果,让用户能够从一系列预设的选项中选取一个或多个值。在这个特定的场景中,我们讨论的是一个关于省市二级...
在微信小程序开发中,`picker-view`组件是一个常用的选择器,可以用于实现用户在预设的选项中进行选择。在创建一个自定义日期选择器时,开发者常常需要处理年、月、日的显示与选择,同时还要考虑到闰年、大小月的...
首先,`NumberPicker`是Android SDK中用于显示和选择数字的一个组件,它可以让我们在两个预设值之间进行上下滚动选择。然而,它的默认样式并不一定满足所有设计需求,所以我们需要对其进行自定义。 1. **自定义View...
在uni-app框架中,选择器(Picker)是一个重要的组件,用于实现用户在多个选项中进行选择的功能。在实际开发中,我们常常会遇到一级、二级甚至三级联动的选择场景,例如省份-城市-区县的选择。在"uniapp选择器,包含...
基于picker-view的日期选择器,只有年月日选择,uni-app自带的组件不适合利用按钮触发调用,该组件可用在uni-popup里,点击按钮获取
在Android开发中,NumberPicker是一个常用的组件,常用于让用户通过上下滚动来选择一个数值。它在许多场景下都很实用,比如设置日期、时间或者选择列表中的一个特定值。本篇文章将详细讲解如何利用NumberPicker实现...