PHP+jquery+CSS制作頭像登錄窗(仿QQ登陸)
本篇介紹設計了一個簡單有趣的包含Gravatar頭像的登錄框功能,頭像是基于郵件id從gravatar.com導出的。這篇文章是非常基本的層面上的CSS實現和幾行Jquery和PHP代碼。我希望這個登錄框設計對您的web項目給出了一些特殊的味道。在嘗試這個示例前請在Gravatar上先上傳你的頭像.
JavaScript
包含javascript代碼。$(".user").keyup(function(){}---user是input標簽的名字,我們通過$(this).val()獲取input的值。如果email值通過了正則表達式,ajax將會請求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("<img src='http://www.gravatar.com/avatar.php?gravatar_id="+html+"?d=mm' />");
}
});
}
});
});
</script>
HTML 代碼
<div id="login_container"> <div id="login_box"> <div id="img_box"><img src="http://www.gravatar.com/avatar/?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
這里包含了十分簡單的代碼:接收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;
}
效果圖如下:

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
CodeIgniter使用smtp服務發(fā)送html郵件的方法
這篇文章主要介紹了CodeIgniter使用smtp服務發(fā)送html郵件的方法,涉及CodeIgniter中email類的使用技巧,需要的朋友可以參考下2015-06-06
PHP設計模式之解釋器(Interpreter)模式入門與應用詳解
這篇文章主要介紹了PHP設計模式之解釋器(Interpreter)模式,結合實例形式詳細分析了PHP解釋器模式的概念、原理、基本應用與相關操作注意事項,需要的朋友可以參考下2019-12-12
從ThinkPHP3.2.3過渡到ThinkPHP5.0學習筆記圖文詳解
這篇文章主要介紹了從ThinkPHP3.2.3過渡到ThinkPHP5.0學習筆記,結合圖文形式詳細分析了thinkPHP3.2.3框架開發(fā)過渡到thinkPHP5.0框架的區(qū)別與改進方法,需要的朋友可以參考下2019-04-04
修改destoon會員公司的偽靜態(tài)中的com目錄的方法
這篇文章主要介紹了修改destoon會員公司的偽靜態(tài)中的com目錄的方法,在偽靜態(tài)設置中很實用的技巧,需要的朋友可以參考下2014-08-08

