常见问题当前位置:星鸿娱乐 > 常见问题 > >

jQuery点击输入框显示验证码图片

  

[jQuery输入框显示验证码,jQuery验证码图片,jQuery验证提示]jQuery点击输入框显示验证码图片

  

先看效果图:  

  

  

  

要求:当输入框获得焦点时,自动显示验证图片。

  

  

代码如下(学习而已,仅供参考):  

  
  
  /***********************下是验证码对象*****************/  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('');  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();  }  }  
  
  

使用方式:  

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

以上就是本文的全部内容,希望对大家的学习有所帮助。

  

(责任编辑:admin)

上一篇:星鸿娱乐给你最佳的游戏玩法体验

下一篇:星鸿娱乐:原生javascript获取元素样式

推荐内容

客户服务热线

400 888 8932

在线客服