Php+jquery+css Make Avatar Login window (imitation QQ landing) _php Example

This article introduces a simple and interesting login box feature that contains the Gravatar avatar, which is derived from gravatar.com based on the message ID. This article is very basic on the level of CSS implementation and a few lines of jquery and PHP code. I hope this login box design gives some special flavor to your Web project. Before attempting this example, please upload your avatar first on the Gravatar.

Javascript

Contains JavaScript code. $ (". User"). KeyUp (function () {}---User is the name of the input label, we get the value of input through $ (this). Val (). If the email value passes the regular expression, Ajax will request 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 (" ") 
;});}); </script> 

HTML Code

<div id= "Login_container" > 
<div id= "Login_box" > 
<div id= "Img_box" ></div> <form action=" login.php "method=" 
post "><input Id= "username" class= "input User" type= "text"/> <input id= "password" class= "input passcode" type= "password"/> & Lt;input class= "BTN" type= "Submit" value= "Login"/></form></div> 
</div> 

avatar.php

Here contains a very simple code: Receive post email, for MD5 encryption, return encrypted data can be.

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

The effect chart is as follows:

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.