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 相关文章推荐
利用文件属性结合Session实现在线人数统计
Oct 09 PHP
针对初学PHP者的疑难问答(2)
Oct 09 PHP
php中文本操作的类
Mar 17 PHP
php表单提交问题的解决方法
Apr 12 PHP
深入PHP中慎用双等于(==)的详解
Jun 06 PHP
使用php实现截取指定长度
Aug 06 PHP
php 模拟post_验证页面的返回状态(实例讲解)
Oct 28 PHP
php获取YouTube视频信息的方法
Feb 11 PHP
学习PHP Cookie处理函数
Aug 09 PHP
PHP多种序列化/反序列化的方法详解
Jun 23 PHP
PHP异常处理定义与使用方法分析
Jul 25 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
May 11 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
php中simplexml_load_string使用实例分享
2014/02/13 PHP
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
Node.js搭建小程序后台服务
2018/01/03 Javascript
vue cli 全面解析
2018/02/28 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
python中__call__方法示例分析
2014/10/11 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
实例讲解Python3中abs()函数
2019/02/19 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
python 实现二维列表转置
2019/12/02 Python
python操作cfg配置文件方式
2019/12/22 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
Python同时处理多个异常的方法
2020/07/28 Python
python mongo 向数据中的数组类型新增数据操作
2020/12/05 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
校园餐饮创业计划书
2014/01/10 职场文书
初中语文教学随笔
2015/08/15 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang