.png)
相關(guān)關(guān)鍵詞
關(guān)于我們
最新文章
- PHP中opcode緩存簡(jiǎn)單用法分析
- thinkPHP控制器變量在模板中的顯示方法示例
- PHP move_uploaded_file() 函數(shù)(將上傳的文件移動(dòng)到新位置)
- dirname(__FILE__)的含義和應(yīng)用說(shuō)明
- thinkPHP5框架實(shí)現(xiàn)分頁(yè)查詢功能的方法示例
- PHP中單雙號(hào)與變量
- PHP獲得當(dāng)日零點(diǎn)時(shí)間戳的方法分析
- Laravel ORM對(duì)Model::find方法進(jìn)行緩存示例詳解
- PHP讀寫文件高并發(fā)處理操作實(shí)例詳解
- 【CLI】利用Curl下載文件實(shí)時(shí)進(jìn)度條顯示的實(shí)現(xiàn)
PHP+jquery+CSS制作頭像登錄窗（仿QQ登陸）
本篇介紹設(shè)計(jì)了一個(gè)簡(jiǎn)單有趣的包含Gravatar頭像的登錄框功能，頭像是基于郵件id從gravatar.com導(dǎo)出的。這篇文章是非常基本的層面上的CSS實(shí)現(xiàn)和幾行Jquery和PHP代碼。我希望這個(gè)登錄框設(shè)計(jì)對(duì)您的web項(xiàng)目給出了一些特殊的味道。在嘗試這個(gè)示例前請(qǐng)?jiān)贕ravatar上先上傳你的頭像.
JavaScript
包含javascript代碼。$(".user").keyup(function(){}---user是input標(biāo)簽的名字，我們通過(guò)$(this).val()獲取input的值。如果email值通過(guò)了正則表達(dá)式，ajax將會(huì)請(qǐng)求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>