PHP+jquery+CSS zum Erstellen eines Avatar-Anmeldefensters (Nachahmung der QQ-Anmeldung)_php-Beispiel

In diesem Artikel wird das Design einer einfachen und interessanten Login-Box-Funktion vorgestellt, die einen Gravatar-Avatar enthält. Der Avatar wird basierend auf der E-Mail-ID von gravatar.com exportiert. Dieser Artikel ist eine sehr einfache CSS-Implementierung und einige Zeilen JQuery- und PHP-Code. Ich hoffe, dass dieses Login-Box-Design Ihrem Webprojekt eine besondere Note verleiht. Bitte laden Sie Ihren Avatar auf Gravatar hoch, bevor Sie dieses Beispiel ausprobieren.

JavaScript

Enthält Javascript-Code. $(".user").keyup(function(){}---user ist der Name des Eingabe-Tags. Wir erhalten den Eingabewert über $(this).val(). Wenn der E-Mail-Wert den regulären Ausdruck übergibt , ajax avatar.php wird angefordert

<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-]+(&#63;:\.[\w-]+)*)@((&#63;:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(&#63;:\.[a-z]{2})&#63;)$/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&#63;gravatar_id="+html+"&#63;d=mm' />"); 
} 
}); 
} 
 
}); 
}); 
</script> 

HTML-Code

<div id="login_container"> 
<div id="login_box"> 
<div id="img_box"><img src="http://www.gravatar.com/avatar/&#63;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

Dies enthält einen sehr einfachen Code: Empfangen Sie die POST-E-Mail, führen Sie eine MD5-Verschlüsselung durch und senden Sie die verschlüsselten Daten zurück.

<&#63;php 
if($_POST['email']) 
{ 
$email=$_POST['email']; 
$lowercase = strtolower($email); 
$image = md5($lowercase); 
echo $image; 
} 
&#63;> 

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

Die Darstellung ist wie folgt:

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich sein wird. Ich hoffe auch, dass jeder Script House unterstützt.