PHP+jquery+CSS制作头像登录窗（仿QQ登陆）

php  /  管理员 发布于 8年前   278

本篇介绍设计了一个简单有趣的包含Gravatar头像的登录框功能，头像是基于邮件id从gravatar.com导出的。这篇文章是非常基本的层面上的CSS实现和几行Jquery和PHP代码。我希望这个登录框设计对您的web项目给出了一些特殊的味道。在尝试这个示例前请在Gravatar上先上传你的头像.

JavaScript

包含javascript代码。$(".user").keyup(function(){}---user是input标签的名字，我们通过$(this).val()获取input的值。如果email值通过了正则表达式，ajax将会请求avatar.php

HTML 代码

avatar.php

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

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版QQ互联OAuth示例代码分享
• QQ登录 PHP OAuth示例代码
• PHP实现QQ快速登录的方法
• PHP第三方登录―QQ登录实现方法
• thinkPHP5项目中实现QQ第三方登录功能
• PHP实现QQ登录实例代码
• PHP模拟QQ登录的方法
• PHP实现QQ登录的开原理和实现过程
• 浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
• PHP调用QQ互联接口实现QQ登录网站功能示例