`
hiuman
  • 浏览: 52145 次
  • 性别: Icon_minigender_2
  • 来自: 广州
社区版块
存档分类
最新评论

picker鼠标上下拖动选择内容

阅读更多
上次写这个的时候的博客: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省市区选择以及默认选择

    uview2.0实现picker省市区选择以及默认选择

    前端picker.js 选择器 轮选择器

    &lt;title&gt;Picker by ustbhuangyi , initial-scale=1,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"&gt; &lt;h1 class="project-name"&gt;Picker &lt;h2 class="project-tagline"&gt;h5 picker inspired by ios ...

    vue学习之mintui picker选择器实现省市二级联动示例

    本文介绍了vue学习之mintui picker选择器实现省市二级联动示例,分享给大家,具体如下: Mint UI 使用文档:https://mint-ui.github.io/docs/#/zh-cn2 Popup弹出框介绍:...

    NumberPicker制作省市选择器/时间选择器

    NumberPicker是Android SDK提供的一种可以滚动选择数字的控件,它允许用户通过上下滚动条来选择一个特定的数值。在XML布局文件中,我们可以直接添加NumberPicker元素,并设置其最小值、最大值和初始值: ```xml ...

    city-picker 城市选择插件

    城市选择插件“city-picker”是一款广泛应用于网页开发中的组件,它主要功能是为用户提供一个交互式的、方便快捷的城市选择界面。在当前信息化社会中,无论是电商网站、地图服务还是各种本地生活应用,都需要这样的...

    lb-picker选择器示例.rar

    在uni-app框架中,lb-picker选择器是一种常用的交互组件,用于实现用户在多个选项中进行选择的功能。这个组件是基于JavaScript和Vue.js技术构建的,适用于移动应用开发,特别是那些需要用户输入特定信息如日期、时间...

    el-data-picker季度区间选择器

    "el-data-picker季度区间选择器"就是这样一个组件,它专为基于ElementUI 2.15.8和Vue.js 2框架的应用设计。这个组件允许用户方便地选取特定时间范围内的季度,提高用户在数据过滤、检索或分析时的效率。 ElementUI...

    android NumberPicker修改选中内容的颜色等

    在Android开发中,`NumberPicker` 是一个非常实用的组件,通常用于实现用户选择数字的交互,例如设置日期、时间或者进行数值选择。本篇文章将深入探讨如何自定义`NumberPicker`,特别是如何修改选中内容的颜色和其他...

    daterangepicker 日期选择控件,

    daterangepicker,日期选择控件,3中选择 1.只到年月日,2.只要时分秒,3全要。 bootstrap2 和3 版本都有,看index.html 引入相应的js,css即可,再复制黏贴核心代码即可! 好用请评价哈

    微信小程序实现自定义picker选择器弹窗内容

    微信小程序实现自定义Picker选择器弹窗内容是指在微信小程序中实现自定义的Picker选择器弹窗内容,满足开发者对选择器弹窗内容的个性化需求。本文将详细介绍微信小程序实现自定义Picker选择器弹窗内容的方法和技术...

    numberpicker android数字选择器

    在Android开发中,`NumberPicker`是一个非常有用的组件,它允许用户通过上下滚动来选择一个数值。这个组件常用于设置日期、时间或者选择特定数量等场景。本篇文章将深入探讨`NumberPicker`的使用方法、属性配置以及...

    微信小程序 -- 年月日时分秒 picker 选择器

    在微信小程序开发中,UI组件的选择器`picker`是一个常用的功能,它允许用户从一系列选项中进行选择。本文将深入探讨如何实现一个专门用于选择年、月、日、时、分、秒的`picker`组件,以提升用户体验并增强应用程序的...

    city-picker城市选择插件

    城市选择插件“city-picker”是一款广泛应用于网页开发中的组件,尤其在处理涉及地理位置和区域选择的场景下显得尤为重要。这款插件基于JavaScript和jQuery库,使得在网页上实现便捷的城市、区县、街道级别的选择变...

    微信小程序picker组件

    微信小程序的Picker组件是开发者在构建用户界面时经常会用到的一个功能组件,它主要用于实现下拉选择器的效果,让用户能够从一系列预设的选项中选取一个或多个值。在这个特定的场景中,我们讨论的是一个关于省市二级...

    picker-view自定义日期、日期选择.zip

    在微信小程序开发中,`picker-view`组件是一个常用的选择器,可以用于实现用户在预设的选项中进行选择。在创建一个自定义日期选择器时,开发者常常需要处理年、月、日的显示与选择,同时还要考虑到闰年、大小月的...

    自定义选择器,仿iOS 选择样式,以及NumberPicker

    首先,`NumberPicker`是Android SDK中用于显示和选择数字的一个组件,它可以让我们在两个预设值之间进行上下滚动选择。然而,它的默认样式并不一定满足所有设计需求,所以我们需要对其进行自定义。 1. **自定义View...

    uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master.zip

    在uni-app框架中,选择器(Picker)是一个重要的组件,用于实现用户在多个选项中进行选择的功能。在实际开发中,我们常常会遇到一级、二级甚至三级联动的选择场景,例如省份-城市-区县的选择。在"uniapp选择器,包含...

    基于picker-view的日期选择器

    基于picker-view的日期选择器,只有年月日选择,uni-app自带的组件不适合利用按钮触发调用,该组件可用在uni-popup里,点击按钮获取

    用NumberPicker实现二联动滚轮选择

    在Android开发中,NumberPicker是一个常用的组件,常用于让用户通过上下滚动来选择一个数值。它在许多场景下都很实用,比如设置日期、时间或者选择列表中的一个特定值。本篇文章将详细讲解如何利用NumberPicker实现...

Global site tag (gtag.js) - Google Analytics