PHP、jQ和CSS制作头像登录窗
498)this.width=498;' onmousewheel = 'javascript:return big(this)' title="使用PHP、jQuery和CSS制作gravatar头像登录窗" height="300" alt="使用PHP、jQuery和CSS制作gravatar头像登录窗" src="https://lh3.googleusercontent.com/-RFUV0LFAAbo/T7vN5VAW8tI/AAAAAAAAGCU/W8cbVtFpbko/s550/loginbox.png" width="550" />
使用PHP、jQuery和CSS制作gravatar头像登录窗
JavaScript
包含javascript代码。$(".user").keyup(function(){}---user是input标签的名字,我们通过$(this).val()获取input的值。如果email值通过了正则表达式,ajax将会请求avatar.php
- src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
- >
- $(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("
");
- }
- });
- }
- });
- });
498)this.width=498;' onmousewheel = 'javascript:return big(this)' title="使用PHP、jQuery和CSS制作gravatar头像登录窗" height="322" alt="使用PHP、jQuery和CSS制作gravatar头像登录窗" src="https://lh6.googleusercontent.com/-S5T-tywC_QU/T7vffdMlKHI/AAAAAAAAGCk/Fz445g_QAdY/s368/wire.png" width="368" />
使用PHP、jQuery和CSS制作gravatar头像登录窗
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加密,返回加密后数据即可。
- 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;
- }