animate完成鼠标放上去显示离开遮蔽效果,JQuery完毕简单验证码提醒技术方案

先看效果图:
图片 1 
要求:当输入框获得焦点时,自动显示验证图片。
代码如下(学习而已,仅供参考):

1、CSS样式:

复制代码 代码如下:

复制代码 代码如下:

/***********************下是验证码对象*****************/
var Validation = {};
Validation.init = function(eleName,imageSrc){
this.image = imageSrc;
$(‘#’+eleName).focusin(function(){
Validation.show(eleName);
});
}
Validation.image = ”;
Validation.display=false;
Validation.width = ‘100px’;
Validation.height = ’30px’;
Validation.div = null;
Validation.show = function(eleName){
if(this.display==false){
//首次显示
if(this.div==null){
$(‘#’+eleName).after(‘<div style=”display:none;”
id=”div_validation_’+eleName+'” title=”点击更换”></div>’);
this.div = $(‘#div_validation_’+eleName);
this.div.css(‘position’,’absolute’);
this.div.css(‘cursor’,’pointer’);
this.div.css(‘border’,’1px solid #CCC’);
this.div.css(‘background-color’,’#FFF’);
this.div.css(‘background-position’,’center’);
this.div.css(‘background-repeat’,’no-repeat’);
this.div.css(‘height’,this.height);
this.div.css(‘width’,this.width);
var objOffset = $(‘#’+eleName).offset();
objOffset.top+=$(‘#’+eleName).height()+6;
this.div.offset(objOffset);
this.div.css(‘background-image’,’url(‘+Validation.image+’&_t=’+new
Date()+’)’);
this.div.css(‘display’,’inline-block’);
this.display = true;
//点击更换
this.div.click(function(){
Validation.div.css(‘background-image’,’url(‘+Validation.image+’&_t=’+new
Date()+’)’);
});
}
else{
this.div.css(‘background-image’,’url(‘+Validation.image+’&_t=’+new
Date()+’)’);
this.display = true;
this.div.css(‘display’,’inline-block’);
}
}
}
Validation.hide =function(){
if(this.display==true){
this.display = false;
this.div.hide();
}
}

@CHARSET “UTF-8”;
* html .showbox,* html .overlay {
position: absolute;
top: expression(eval(document.documentElement.scrollTop) );
}
#AjaxLoading {
border: 1px solid #8CBEDA;
color: #37a;
font-size: 12px;
font-weight: bold;
}
#AjaxLoading div.loadingWord {
width: 180px;
height: 50px;
line-height: 50px;
border: 2px solid #D6E7F2;
background: #fff;
}
#AjaxLoading img {
margin: 10px 15px;
float: left;
display: inline;
}
.overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 998;
width: 100%;
height: 100%;
_padding: 0 20px 0 0;
background: #f6f4f5;
display: none;
}
.showbox {
position: fixed;
top: 0;
left: 50%;
z-index: 9999;
opacity: 0;
filter: alpha(opacity = 0);
margin-left: -80px;
}

使用方式

2、JS:

复制代码 代码如下:

复制代码 代码如下:

//验证码对象初始化
Validation.init(‘validation’,’Ajax.ashx?handle=validation’);
// 输入框ID 验证图片地址
//隐藏
Validation.hide();

/**
* 加载动画窗口
*
* @author dendy
* @since 2013-7-19 10:13:05
*/
function getLoadingHtml(msg) {
if(!msg) msg = “加载”;
var html = “<div id=’loadingDiv’>”

要求:当输入框获得焦点时,自动显示验证图片。
代码如下(学习而已,仅供参考): 复制代码 代码如下:
/******************…

  • “<div style=’height: 1325px; display: none; opacity: 0;’
    class=’overlay’></div>”
  • “<div style=’opacity: 0; margin-top: 250px;’ id=’AjaxLoading’
    class=’showbox’>”
  • “<div class=’loadingWord’>”
  • “<img src='” + Util.getContentPath()
    +”/images/ajax-loader.gif’>” + msg + “中,请稍候…”
  • “</div>”
  • “</div>”
  • “<div style=’height: 1200px;’></div>”
  • “</div>”;
    return html;
    }
    function ajaxLoadingInit(msg) {
    var loadingDiv = getLoadingHtml(msg);
    var h = $(document).height();
    $(“.overlay”).css({“height”: h});
    var div = $(“body”).find(“#loadingDiv”);
    div.remove();
    $(“body”).append($(loadingDiv));
    }
    /**
    * 开始显示loading,在ajax执行之前调用
    * @param msg 操作消息,”加载”, “保存”, “删除”
    */
    function startLoading(msg) {
    ajaxLoadingInit(msg);
    $(“.overlay”).css({‘display’:’block’,’opacity’:’0.8′});
    $(“.showbox”).stop(true).animate({‘margin-top’:’300px’,’opacity’:’1′},200);
    }
    /**
    * 加载完成后隐藏,在ajax执行完成后(complete)调用
    */
    function endLoading() {
    $(“.showbox”).stop(true).animate({‘margin-top’:’250px’,’opacity’:’0′},400);
    $(“.overlay”).css({‘display’:’none’,’opacity’:’0′});
    }

3、调用例子:

复制代码 代码如下:

startLoading();
$.ajax({
type : “POST”,
url : this.url,
dataType : “json”,
data : this.args,
success : function (data) {

},
complete : function () {
if (self.showLoading == true) endLoading();
},
error : this.error
});

复制代码 代码如下: @CHARSET “UTF-8”;
* html .showbox,* html .overlay { position: absolute; top:
expression(eval(document.documentElement.scrollTop) ); } #Aj…