发布于 2017-08-26 17:56:10 | 36 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例,程序狗速度看过来!

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。


本篇文章介绍了PHP结合jQ和CSS制作头像登录窗(仿QQ登陆),实现了类似QQ的登陆界面,很有参考价值,有需要的朋友可以了解一下。

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

效果图如下:

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



相关阅读 :
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
Html5+jQuery+CSS制作相册小记录
基于jquery ui的alert,confirm方案(支持换肤)
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
详解jquery validate实现表单验证 (正则表达式)
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
jQuery结合CSS制作动态的下拉菜单
jQuery结合CSS制作漂亮的select下拉菜单
基于PHP+Jquery制作的可编辑的表格的代码
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
jquery实现弹窗功能(窗口居中显示)
jQuery实现优雅的弹窗效果(6)
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务