PHP+jquery+CSS製作頭像登入窗（仿QQ登陸）_php執行個體

本篇介紹設計了一個簡單有趣的包含Gravatar頭像的登入框功能，頭像是基於郵件id從gravatar.com匯出的。這篇文章是非常基本的層面上的CSS實現和幾行Jquery和PHP代碼。我希望這個登入框設計對您的web項目給出了一些特殊的味道。在嘗試這個樣本前請在Gravatar上先上傳你的頭像.

JavaScript

包含javascript代碼。$(".user").keyup(function(){}---user是input標籤的名字，我們通過$(this).val()擷取input的值。如果email值通過了Regex，ajax將會請求avatar.php

HTML 程式碼

avatar.php

這裡包含了十分簡單的代碼：接收POST過來的email，進行md5加密，返回加密後資料即可。

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

如下：

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援指令碼之家。

