铁雪资源网 Design By www.gsvan.com

本篇介绍设计了一个简单有趣的包含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="/UploadFiles/2021-04-02/jquery.min.js">

HTML 代码

<div id="login_container"> 
<div id="login_box"> 
<div id="img_box"><img src="/UploadFiles/2021-04-02/">

avatar.php

这里包含了十分简单的代码:接收POST过来的email,进行md5加密,返回加密后数据即可。

<"htmlcode">
#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制作头像登录窗(仿QQ登陆)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
jquery,登录,php弹出式登录窗口

铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com

评论“PHP+jquery+CSS制作头像登录窗(仿QQ登陆)”

暂无PHP+jquery+CSS制作头像登录窗(仿QQ登陆)的评论...