PHP+jquery+CSS制作頭像登錄窗（仿QQ登陸）

更新時(shí)間：2016年10月20日 15:26:48 作者：張偉

本篇文章介紹了PHP結(jié)合jQ和CSS制作頭像登錄窗（仿QQ登陸），實(shí)現(xiàn)了類(lèi)似QQ的登陸界面，很有參考價(jià)值，有需要的朋友可以了解一下。

本篇介紹設(shè)計(jì)了一個(gè)簡(jiǎn)單有趣的包含Gravatar頭像的登錄框功能，頭像是基于郵件id從gravatar.com導(dǎo)出的。這篇文章是非常基本的層面上的CSS實(shí)現(xiàn)和幾行Jquery和PHP代碼。我希望這個(gè)登錄框設(shè)計(jì)對(duì)您的web項(xiàng)目給出了一些特殊的味道。在嘗試這個(gè)示例前請(qǐng)?jiān)贕ravatar上先上傳你的頭像.

JavaScript

包含javascript代碼。$(".user").keyup(function(){}---user是input標(biāo)簽的名字，我們通過(guò)$(this).val()獲取input的值。如果email值通過(guò)了正則表達(dá)式，ajax將會(huì)請(qǐng)求avatar.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript" > 
$(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("<img src='http://www.gravatar.com/avatar.php?gravatar_id="+html+"?d=mm' />"); 
} 
}); 
} 
 
}); 
}); 
</script>

HTML 代碼

<div id="login_container"> 
<div id="login_box"> 
<div id="img_box"><img src="http://www.gravatar.com/avatar/?d=mm" alt="" /></div> 
<form action="login.php" method="post"><input id="username" class="input user" type="text" /> <input id="password" class="input passcode" type="password" /> <input class="btn" type="submit" value=" Login " /></form></div> 
</div>

avatar.php

這里包含了十分簡(jiǎn)單的代碼：接收POST過(guò)來(lái)的email，進(jìn)行md5加密，返回加密后數(shù)據(jù)即可。

<?php 
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; 
}

效果圖如下：