滑动验证

css:

/*验证star*/
	.nocaptchaContainer{position:absolute;z-index:99;left:0px;top:0px;width:324px;height:240px;overflow:hidden;margin:0;border: 1px solid #cccccc;padding-left: 28px;background: #fff;}
	.nocaptchaContainer p{margin:16px 0px;height:20px;line-height: 20px;font-size: 15px;}
	.nocaptcha-img{position:relative;width:300px;background: url(loading.png) 50% 50% no-repeat #f2f2f2;}
	.nocaptcha-img .nocaptcha-ori{display: block;width:300px;height:150px;position:absolute;left:0px;top:0px;background:url('1.jpg');}
	.nocaptcha-img .nocaptcha-new{display: none;width:300px;height:150px;position:absolute;left:0px;top:0px;background:url('1-3.jpg')}
	.nocaptcha-img .nocaptcha-info-mask{display: none;width:300px;height:150px;background: rgba(0,0,0,0.6);background: #000\0;filter:alpha(opacity=60)\0;opacity: 0.6\0;*background: rgb(0,0,0);*filter:alpha(opacity=60);*opacity: 0.6;position: relative;z-index: 99;}
	.nocaptcha-img .nocaptcha-info-mask span{color: #fff;width: 100%;text-align: center;display: block;position: absolute;top: 104px;}
	.nocaptcha-change{text-align: right;position: absolute;bottom: 5px;right: 10px;font-size: 14px;}
	.nocaptcha-change a{color:#1f83bd;text-decoration:none;}
	.nocaptcha-change a:hover{color:#3498db;}
	.nocaptcha-slice{position:absolute;left:273px;top:0px;display: block; width: 60px; height: 60px; background-image: url('1-3-1.png');}
	/*验证end*/

html:

<div id="captchaContainer" class="nocaptchaContainer hide">
	<p style="">拖动右侧图片完成拼图以获取验证码</p>
	<div class="nocaptcha-img">
	<div class="nocaptcha-ori"></div>
	<div id="mask" class="nocaptcha-new"></div>
	<div class="nocaptcha-info-mask"><span style="">拼图好像不正确，请刷新重试</span></div>
	</div>
	<div class="nocaptcha-change"><span><a href="javascript:void(0);" id="nocaptcha-change">换一张</a></span></div>
	<div id="silderElemnet" class="nocaptcha-slice"></div>
	</div>

js:

//验证star
	//getCaptchaInfo();
	var silderElemnet=$("#silderElemnet");
	var captchaContainer=$("#captchaContainer");
	$("#nocaptcha-change").click(function(){
		$(".nocaptcha-info-mask").hide();
		silderElemnet.css({left:273+"px",top:0+"px"});
		getCaptchaInfo();
	});
	$(".nocaptcha-info-mask").click(function(){
		$(".nocaptcha-info-mask").hide();
		silderElemnet.css({left:273+"px",top:0+"px"});
		getCaptchaInfo();
	});
	silderElemnet.mousedown(function(){
		/*获取container位置*/
		var captchaContainerLeft=captchaContainer.offset().left;
		var captchaContainerTop=captchaContainer.offset().top;
		/*获取滚动条位置*/
		var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
		var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
		$("#mask").show();
		captchaContainer.mousemove(function(e){
			e=e||event;
			silderElemnet.css({left:e.clientX+scrollLeft-captchaContainerLeft-30+"px",top:e.clientY+scrollTop-captchaContainerTop-30+"px"});
		})
	});
	silderElemnet.mouseup(function(){
		$("#mask").hide();
		captchaContainer.unbind().mousemove(function(){});
		$(".nocaptcha-info-mask").show();
		if((parseInt(silderElemnet.css('left'))-sliderLeft>-5&&parseInt(silderElemnet.css('left'))-sliderLeft<5)&&(parseInt(silderElemnet.css('top'))-sliderTop>-5&&parseInt(silderElemnet.css('top'))-sliderTop<5)){
			$(".nocaptcha-info-mask span").html(Dict.val("register_verify_code"));
			if(max_num <= 0&&Register.valiteMessageCode()){
				max_num = timeOut;
				sendMessage();
			}
			else if(max_num > 0){
				$(".nocaptcha-info-mask span").html(Dict.val("fp_please")+max_num+Dict.val("fp_seconds"));
			}
			else{
				$(".nocaptcha-info-mask span").html(Dict.val("register_please_try_again"));
			}
			setTimeout(function(){$("#captchaContainer").hide();captchaShowOrNot=true;},1000);
		}
		else{
			$(".nocaptcha-info-mask span").html(Dict.val("register_puzzle_not_right"));
		}
	})
	//验证end