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