Home > Backend Development > PHP Tutorial > PHP+jquery+CSS to create avatar login window (imitation QQ login)_php example

PHP+jquery+CSS to create avatar login window (imitation QQ login)_php example

WBOY
Release: 2023-03-03 06:08:01
Original
1069 people have browsed it

This article introduces the design of a simple and interesting login box function containing a Gravatar avatar. The avatar is exported from gravatar.com based on the email ID. This article is a very basic level implementation of CSS and a few lines of Jquery and PHP code. I hope this login box design gives some special flavor to your web project. Please upload your avatar on Gravatar before trying this example.

JavaScript

Contains javascript code. $(".user").keyup(function(){}---user is the name of the input tag. We get the input value through $(this).val(). If the email value passes the regular expression, ajax avatar.php will be requested

<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> 
Copy after login

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> 
Copy after login

avatar.php

This contains a very simple code: receive the POST email, perform md5 encryption, and return the encrypted data.

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

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; 
} 
Copy after login

The rendering is as follows:

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope that everyone will support Script Home.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template