jq 登陆界面 php,PHP+jquery+CSS制作头像登录窗（仿QQ登陆）

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

}

});

}

});

});

HTML 代码

avatar.php

这里包含了十分简单的代码：接收POST过来的email，进行md5加密，返回加密后数据即可。

if($_POST['email'])

{

$email=$_POST['email'];

$lowercase = strtolower($email);

$image = md5($lowercase);

echo $image;

}

?>

CSS

#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;

}

效果图如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。