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 相关文章推荐
php 之 没有mysql支持时的替代方案
Oct 09 PHP
PHP写MySQL数据 实现代码
Jun 15 PHP
php短域名转换为实际域名函数
Jan 17 PHP
PHP中file_exists与is_file,is_dir的区别介绍
Sep 12 PHP
ThinkPHP3.1基础知识快速入门
Jun 19 PHP
PHP利用MySQL保存session的实现思路及示例代码
Sep 09 PHP
详解php设置session(过期、失效、有效期)
Nov 12 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
Sep 11 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
Sep 23 PHP
php自定义函数实现汉字转换utf8编码的方法
Sep 29 PHP
PHP随机数函数rand()与mt_rand()的讲解
Mar 25 PHP
详解php中流行的rpc框架
May 29 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
火车头采集器3.0采集图文教程
2007/03/17 PHP
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
PHP使用header()输出图片缓存实例
2014/12/09 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
微信小程序 引入es6 promise
2017/04/12 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
毕业生自荐信
2013/12/14 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
会计学毕业生求职信
2014/06/25 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
Nginx内网单机反向代理的实现
2021/11/07 Servers