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中的时间显示
Jan 18 PHP
php在字符串中查找另一个字符串
Nov 19 PHP
CodeIgniter针对数据库的连接、配置及使用方法
Mar 03 PHP
深入理解PHP之OpCode原理详解
Jun 01 PHP
php断点续传之文件分割合并详解
Dec 13 PHP
php pdo操作数据库示例
Mar 10 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
Mar 12 PHP
PHP分享图片的生成方法
Apr 25 PHP
浅谈Laravel核心解读之Console内核
Dec 02 PHP
PHP去除空数组且数组键名重置的讲解
Feb 28 PHP
Laravel 登录后清空COOKIE的操作方法
Oct 14 PHP
分享8个Laravel模型时间戳使用技巧小结
Feb 12 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实现文件安全下载
2006/10/09 PHP
用Socket发送电子邮件
2006/10/09 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
PHP安全上传图片的方法
2015/03/21 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
Python对象体系深入分析
2014/10/28 Python
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
python三引号输出方法
2019/02/27 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
python基于event实现线程间通信控制
2020/01/13 Python
python计算Content-MD5并获取文件的Content-MD5值方式
2020/04/03 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
建筑专业自我鉴定
2013/10/22 职场文书
世界气象日活动总结
2015/02/27 职场文书
建房合同协议书
2016/03/21 职场文书
Android实现图片九宫格
2022/06/28 Java/Android