滑动解锁验证

效果图

滑动解锁前：

滑动解锁后：

具体代码如下：（一个html页面，一个css文件，两个js文件）

目录结构：

slideUnlock.html

	
		
		
		
		
		
	
	
		
		
		

			

				

					
				
			
			拖动滑块验证
		
		
	

drag.css

/*	滑动解锁验证	按钮样式	*/
@font-face {
	font-family: "iconfont";
	src: url('iconfont.eot?t=1516950505203');
	/* IE9*/
	src: url('iconfont.eot?t=1516950505203#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAhcAAsAAAAAC+AAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW8ElSY21hcAAAAYAAAACJAAAB9GoSO9hnbHlmAAACDAAABA4AAAUIC8QleWhlYWQAAAYcAAAAMQAAADYQPy3NaGhlYQAABlAAAAAgAAAAJAfcA4lobXR4AAAGcAAAABcAAAAgH+n//mxvY2EAAAaIAAAAEgAAABIGDATibWF4cAAABpwAAAAfAAAAIAEXAGJuYW1lAAAGvAAAAUUAAAJtPlT+fXBvc3QAAAgEAAAAVwAAAGvSbel4eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/ss4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDxPZm7438AQw9zA0AQUZgTJAQAsegzXeJzFkcENgzAMRb9DAKnqgSs7dBUmQOJCh2CGnpjyMwZ8x0ilUu986yXyl5NYMYAaQCVeIgO2wuD6yLXiV3gUP2NS3im8fmFiz4Ejuc37/te5ysrJb7iT0OqujMa7sAa3ye57+lfPsr7PrBXLiVpkCuB7H3gNh8DnwjHwWZKB/hfbHKA+AP8rJ3AAAAB4nE1TX2gcZRD/5vv2dm/39vbu9vZ27zZN7m73cnvX1ATvNpvWkotQKSiKTb0itqGpNMQiVDQIebFJfEi9hDYnWIKmJKIIiik0+OAfLOiLwgmCvhT/vFQUBf88tYiIt3F2E00/PnZm5/vNMPObGRIhZPsHdoNlSZpUyL3kAXKMEOAHwFJoLxQdd5AOQKYYyRiawhzbKQq2NchGwbB4Ta95btngBT4BCvRBvVjznEHqwLDboIehpvcC5HrMx9T+fSp7GaSs07foP0TfhEze3pdo3OM/eGBMqxXS0VlZVXOqeinKRyJRSrmEAucNXYyIEu+/FUmYmRv5Ks2DnHPMh5+IF3rUJ1vuM739hgiwsADpnoLy9ljKTOF9wdTTak5IxqNZM26XNJj9KZZNy73lHwkehrW+yBG2QLJY6SOERCxnEJyyO9KAEa9m9IGha4ICAs+sUGihqRY+uyGUoVK2Eqhh/fkAotfGAgy+U3JucuKyU6k4lycmv9pTz000j1+w8Vw43vxwTx3qiOmc1OlIubTYuUufrzgrpya/njy1Evj/r7LPStbcePOj5vicVbpL9Q93RDMd+KZNsfPFnk4IxXo/Zx+z+0iCVLGrRQUyKU03ilhPahAYYOP4ISjjdcfAq+Uh3YA86Bqb63KmbZv0H9MCsN7w/4jwUUGgHLcliiBmpbUufiDKDoFldqMhyKR/mZb/nv9rhAGGptx1KYtYcQ0gCiJ2nxAO83mXfckeJ0UyRMbICczJ9obLIbM7jAuaYaNMIe+7WfajaOAwBa3IFEHj7aJVHk65Ho6bnokETrqBo4Z16d4ouEGD2IwFnJ47PdpYboyezukc1Jw6QN2hd8ougNs9wVXtytlnz1bsKtf9jq4rUleOKUqM3pEUf0bvo1SOJaVoLJHQSjTF2EG3caYHz5mGe5AxcB3/WBioDFuOy+onS9X9+6ulk3XaxQCKBFtBsEdpr540xbg2I8pA49LzWjzlWWSnL3+y80wiERIjRARHhJGiIIIB9H5/1oZpf82GA7tyCRZCG0zbtr8WWjAGt+1vz7G/cZYp7q1HDgVc1oNJRTKRFGRrlxovMNbxH2+9AcNI6QAgCK07oAGALi+/cmQc2LX5+WsMxo+sfKrTZELWWO72prx5O8dSMlMS+if+94xNLVLamppqUbo4hVyUqpWlJnqhb3OpMnTrqqIy9N38huO/fUdOAtPkq7eOchdDD/S7yIV7OM+2MfcYMTB7AuWCwCcNvTDiqYwvOOXkiFcw9CT7b89wByFYPPb0uj+9ceXKBry6vgoftP1L7dZyG2baS+/7r98UVEX4WVAFmBEUlf6GMP+pjdXVDXit+3ur1Ybn2svLbb8Ny/5LNxEh/CIIsBRVFaTzX4WHCLoAAHicY2BkYGAA4kOPebLj+W2+MnCzMIDAtQlfXsLo///+17EwMDcAuRwMTCBRAIHADl4AAAB4nGNgZGBgbvjfwBDDwvD/HwMDCwMDUAQFcAAAdcgEbnicY2FgYGB+ycDAwoCO//8D0QAlxwMGAAAAAAAAdgDuATYBugHcAjoChAAAeJxjYGRgYOBgCGNgZQABJiDmAkIGhv9gPgMAEfsBegB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxjYGKAAC4G7ICDkYmRmZGFkZWRjZGdkYORk4Gxgt0ovTQxLymTM620AsgoTs1hyc3MTeRJyS9NyknVLcpMzyhhzUzOz9PlBMlXZeTnpTMwAAA6HhOVAA==') format('woff'), url('iconfont.ttf?t=1516950505203') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
	url('iconfont.svg?t=1516950505203#iconfont') format('svg');
	/* iOS 4.1- */
}

.iconfont {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-2guanbi:before {
	content: "\e602";
}

.icon-fuxuansel:before {
	content: "\e64d";
}

.icon-mima:before {
	content: "\e65b";
}

.icon-double-right:before {
	content: "\e763";
}

.icon-icon-:before {
	content: "\e6e6";
}

.icon-xuanzhong:before {
	content: "\e619";
}



/*	滑动解锁验证	其它样式	*/
#slide_box {
	width: 100%;
	height: 40px;
	text-align: center;
	line-height: 40px;
	font-size: 14px;
	color: #717171;
	background-color: #e8e8e8;
	border: none;
	margin-bottom: 20px;
}

#slide_xbox {
	width: 50px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	font-size: 16px;
	color: #fff;
	position: absolute;
	background: #35b34a;
}

#btn {
	cursor: pointer;
	width: 50px;
	height: 40px;
	background-color: #fff;
	float: right;
	-webkit-box-shadow: 0px 0px 15px 0px #ddd;
	-moz-box-shadow: 0px 0px 15px 0px #ddd;
	box-shadow: 0px 0px 15px 0px #ddd;
	color: #8a8c97;
}

#btn > .iconfont {
	font-size: 20px;
}

drag.js

var locked;
window.onload = function() {
	slide();
	//禁止F12
	$("*").keydown(function(e) { //判断按键
		e = window.event || e || e.which;
		if (e.keyCode == 123) {
			e.keyCode = 0;
			return false;
		}
	});
	//禁止审查元素
	$(document).bind("contextmenu", function(e) {
		return false;
	});
}
window.onresize = function() {
		if (locked == true) {
			var boxWidth = $('#slide_box').width();
			$('#slide_xbox').width(boxWidth);
		} else {
			slide();
		}
	}
//滑动解锁移动
function slide() {
	var slideBox = $('#slide_box')[0];
	var slideXbox = $('#slide_xbox')[0];
	var btn = $('#btn')[0];
	var slideBoxWidth = slideBox.offsetWidth;
	var btnWidth = btn.offsetWidth;
	//pc端
	btn.ondragstart = function() {
		return false;
	};
	btn.onselectstart = function() {
		return false;
	};
	btn.onmousedown = function(e) {
		var disX = e.clientX - btn.offsetLeft;
		document.onmousemove = function(e) {
			var objX = e.clientX - disX + btnWidth;
			if (objX < btnWidth) {
				objX = btnWidth
			}
			if (objX > slideBoxWidth) {
				objX = slideBoxWidth
			}
			$('#slide_xbox').width(objX + 'px');
		};
		document.onmouseup = function(e) {
			var objX = e.clientX - disX + btnWidth;
			if (objX < slideBoxWidth) {
				objX = btnWidth;
			} else {
				objX = slideBoxWidth;
				locked = true;
				/*$("#code").val("1");*/
				$('#slide_xbox').html('验证通过
');
			}
			$('#slide_xbox').width(objX + 'px');
			document.onmousemove = null;
			document.onmouseup = null;
		};
	};
	//移动端
	var cont = $("#btn");
	var startX = 0,
		sX = 0,
		moveX = 0,
		leftX = 0;
	cont.on({ //绑定事件
		touchstart: function(e) {
			startX = e.originalEvent.targetTouches[0].pageX; //获取点击点的X坐标
			sX = $(this).offset().left; //相对于当前窗口X轴的偏移量
			leftX = startX - sX; //鼠标所能移动的最左端是当前鼠标距div左边距的位置
		},
		touchmove: function(e) {
			e.preventDefault();
			moveX = e.originalEvent.targetTouches[0].pageX; //移动过程中X轴的坐标
			var objX = moveX - leftX + btnWidth;
			if (objX < btnWidth) {
				objX = btnWidth
			}
			if (objX > slideBoxWidth) {
				objX = slideBoxWidth
			}
			$('#slide_xbox').width(objX + 'px');
		},
		touchend: function(e) {
			var objX = moveX - leftX + btnWidth;
			if (objX < slideBoxWidth) {
				objX = btnWidth;
			} else {
				objX = slideBoxWidth;
				locked = true;
				/*$("#code").val("1");*/
				$('#slide_xbox').html('验证通过
');
			}
			$('#slide_xbox').width(objX + 'px');
		}
	});
}