PHP + jquery + CSS create Avatar login window (like QQ login), jquerycss

PHP + jquery + CSS create Avatar login window (like QQ login), jquerycss

This article introduces how to design a simple and interesting logon box function that includes the Gravatar avatar. the Avatar is exported from gravatar.com Based on the email id. This article is a very basic CSS implementation and several lines of Jquery and PHP code. I hope this login box design gives some special taste to your web project. Upload your profile picture 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 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(" 

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" /> <input class="btn" type="submit" value=" Login " /></form></div> </div> 

Avatar. php

It contains very simple code: receive POST-sent emails, perform md5 encryption, and return encrypted data.

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

As follows:

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.