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>

转载于:https://www.cnblogs.com/hiuman/p/7347387.html