PHP、jQ和CSS制作头像登录窗

我设计了一个简单有趣的包含Gravatar头像的登录框功能，头像是基于邮件id从gravatar.com导出的。这篇文章是非常基本的层面上的CSS实现和几行Jquery和PHP代码。我希望这个登录框设计对您的web项目给出了一些特殊的味道。在尝试这个示例前请在Gravatar上先上传你的头像.

创新互联公司不只是一家网站建设的网络公司；我们对营销、技术、服务都有自己独特见解，公司采取“创意+综合+营销”一体化的方式为您提供更专业的服务！我们经历的每一步也许不一定是最完美的，但每一步都有值得深思的意义。我们珍视每一份信任，关注我们的成都做网站、成都网站制作、成都外贸网站建设质量和服务品质，在得到用户满意的同时，也能得到同行业的专业认可，能够为行业创新发展助力。未来将继续专注于技术创新，服务升级，满足企业一站式全网营销推广需求，让再小的成都品牌网站建设也能产生价值！

使用PHP、jQuery和CSS制作gravatar头像登录窗

JavaScript

包含javascript代码。$(".user").keyup(function(){}---user是input标签的名字，我们通过$(this).val()获取input的值。如果email值通过了正则表达式，ajax将会请求avatar.php

 
 
 
 
  
  
  
   
  
  
  
   
  
  
  
  $(document).ready(function() 
  
  
  
  { 
  
  
  
  $("#username").focus(); 
  
  
  
  $(".user").keyup(function() 
  
  
  
  { 
  
  
  
  var email=$(this).val(); 
  
  
  
  var dataString = 'email='+ email ; 
  
  
  
  var ck_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i; 
  
  
  
  
  
  
  
  if(ck_email.test(email)) 
  
  
  
  { 
  
  
  
  $.ajax({ 
  
  
  
  type: "POST", 
  
  
  
  url: "avatar.php", 
  
  
  
  data: dataString, 
  
  
  
  cache: false, 
  
  
  
  success: function(html) 
  
  
  
  { 
  
  
  
  $("#img_box").html(""); 
  
  
  
  } 
  
  
  
  }); 
  
  
  
  } 
  
  
  
  
  
  
  
  }); 
  
  
  
  });

使用PHP、jQuery和CSS制作gravatar头像登录窗

HTML 代码

if($_POST['email'])
{
$email=$_POST['email'];
$lowercase = strtolower($email);
$image = md5($lowercase);
echo $image;
}
?>

#login_container
{
background:url(blue.jpg) #006699;
overflow: auto;
width: 300px;
}
#login_box
{
padding:60px 30px 30px 30px;
border:solid 1px #dedede;
width:238px;
background-color:#fcfcfc;
margin-top:70px;
}
#img_box
{
background-color: #FFFFFF;
border: 1px solid #DEDEDE;
margin-left: 77px;
margin-top: -108px;
position: absolute;
width: 86px;
height: 86px;
}