php登录与css,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()

{

varemail=$(this).val();

vardataString ='email='+ email ;

varck_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 代码