相关关键词
关于我们
最新文章
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
发布日期:2016-10-20 00:00:00
73
本篇介绍设计了一个简单有趣的包含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>