您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“PHP+jquery+CSS如何制作頭像登錄窗”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“PHP+jquery+CSS如何制作頭像登錄窗”這篇文章吧。
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>
HTML 代碼
<div id="login_container"> <div id="login_box"> <div id="img_box"><img src="http://www.gravatar.com/avatar/?d=mm" /></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
這里包含了十分簡(jiǎn)單的代碼:接收POST過(guò)來(lái)的email,進(jìn)行md5加密,返回加密后數(shù)據(jù)即可。
<?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; }
效果圖如下:
以上是“PHP+jquery+CSS如何制作頭像登錄窗”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。