아바타 로그인 창을 생성하는 PHP+jquery+CSS(QQ 로그인 모방)_php 예

이 기사에서는 Gravatar 아바타가 포함된 간단하고 흥미로운 로그인 상자 기능의 디자인을 소개합니다. 아바타는 이메일 ID를 기반으로 gravatar.com에서 내보내집니다. 이 기사는 CSS와 몇 줄의 Jquery 및 PHP 코드를 매우 기본적인 수준으로 구현한 것입니다. 이 로그인 상자 디자인이 귀하의 웹 프로젝트에 특별한 느낌을 주기를 바랍니다. 이 예제를 시도하기 전에 Gravatar에 아바타를 업로드하십시오.

자바스크립트

자바스크립트 코드가 포함되어 있습니다. $(".user").keyup(function(){}---user는 입력 태그의 이름입니다. $(this).val()을 통해 입력 값을 얻습니다. 이메일 값이 정규 표현식을 통과하면 , 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-]+(&#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> 

HTML 코드

<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> 

avatar.php

여기에는 매우 간단한 코드가 포함되어 있습니다. POST 이메일을 받고, md5 암호화를 수행하고, 암호화된 데이터를 반환합니다.

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

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

렌더링은 다음과 같습니다.

위 글의 내용은 모두의 공부에 도움이 되길 바랍니다.