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


Posted in PHP onOctober 20, 2016

本篇介绍设计了一个简单有趣的包含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="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; 
}

效果图如下:

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

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

PHP 相关文章推荐
桌面中心(三)修改数据库
Oct 09 PHP
PHP Header用于页面跳转要注意的几个问题总结
Oct 03 PHP
PHP isset()与empty()的使用区别详解
Aug 29 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
Jun 08 PHP
解析php扩展php_curl.dll不加载的解决方法
Jun 26 PHP
win7安装php框架Yii的方法
Jan 25 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
Feb 03 PHP
深入剖析PHP中printf()函数格式化使用
May 23 PHP
php进程间通讯实例分析
Jul 11 PHP
php实现的双色球算法示例
Jun 20 PHP
Swoole4.4协程抢占式调度器详解
May 23 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
Nov 24 PHP
PHP中的多种加密技术及代码示例解析
Oct 20 #PHP
php rmdir使用递归函数删除非空目录实例详解
Oct 20 #PHP
PHPCMS V9 添加二级导航的思路详解
Oct 20 #PHP
php实现登陆模块功能示例
Oct 20 #PHP
php实现文章置顶功能的方法
Oct 20 #PHP
PHP上传图片时判断上传文件是否为可用图片的方法
Oct 20 #PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
Oct 19 #PHP
You might like
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
php计算函数执行时间的方法
2015/03/20 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
JS 字符串连接[性能比较]
2009/05/10 Javascript
jquery异步请求实例代码
2011/06/21 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
django做form表单的数据验证过程详解
2019/07/26 Python
python列表推导式入门学习解析
2019/12/02 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
应用心理学个人的求职信
2013/12/08 职场文书
学生出入校管理制度
2014/01/16 职场文书
元旦晚会感言
2014/03/12 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
爱的承诺书
2015/01/20 职场文书
感恩的心主题班会
2015/08/12 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android
redis复制有可能碰到的问题汇总
2022/04/03 Redis