PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016-10-20 00:00
531 查看
本篇介绍设计了一个简单有趣的包含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
效果图如下:
![](http://files.jb51.net/file_images/article/201610/20161020152151494.jpg?2016920152210)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
PHP+jQuery+Ajax实现用户登录与退出
JavaScript
包含javascript代码。$(".user").keyup(function(){}---user是input标签的名字,我们通过$(this).val()获取input的值。如果email值通过了正则表达式,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-]+(?:\.[\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" 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过来的email,进行md5加密,返回加密后数据即可。
<?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; }
效果图如下:
![](http://files.jb51.net/file_images/article/201610/20161020152151494.jpg?2016920152210)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)PHP+jQuery+Ajax实现用户登录与退出
相关文章推荐
- PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
- 使用PHP、jQuery和CSS制作gravatar头像登录窗
- 使用PHP制作 简易员工管理系统之八(使用COOKIE保存用户登陆id以及显示用户登录时间)
- 针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
- 针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
- 利用html、css、javascript、php同时交互数据库制作的注册登录界面
- Notepad++ 配置 支持jquery、html、css、javascript、php代码提示
- 于jQuery+CSS制作的选项卡
- PHP和jQuery实现截图自定义头像
- QQ农场制作心得——登录数据分析
- PHP+jQuery+Ajax实现用户登录与退出
- QQ的基于CSS+DIV制作的下拉可折叠菜单
- PHP+Jquery制作可编辑的表格
- PHP利用jQuery,轻松搞定二级联动菜单制作
- QQ登录 PHP OAuth示例代码
- PHP实例程序:用PHP制作登录页面程序
- QQ登录PHP Oauth示例
- 用VC++制作QQ自动登陆软件
- 用VC++制作QQ自动登陆软件
- [软件推荐]jQuery,JavaScript,HTML,CSS,PHP,MySQL,正则表达式 CHM帮助手册