PHP+jquery+CSS如何制作头像登录窗-创新互联

这篇文章主要为大家展示了“PHP+jquery+CSS如何制作头像登录窗”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“PHP+jquery+CSS如何制作头像登录窗”这篇文章吧。

创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站建设、成都做网站、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的红安网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

JavaScript


包含javascript代码。$(".user").keyup(function(){}---user是input标签的名字,我们通过$(this).val()获取input的值。如果email值通过了正则表达式,ajax将会请求avatar.php


 
 
$(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(""); 
} 
}); 
} 
 
}); 
}); 

HTML 代码


 
 
    
 

avatar.php

这里包含了十分简单的代码:接收POST过来的email,进行md5加密,返回加密后数据即可。


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如何制作头像登录窗

以上是“PHP+jquery+CSS如何制作头像登录窗”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


当前标题:PHP+jquery+CSS如何制作头像登录窗-创新互联
分享URL:http://www.kmzsk.com/article/ddjhoe.html

其他资讯

Copyright © 2026 昆明姝彩聂商贸有限公司 All Rights Reserved 滇ICP备2025072963号-9
友情链接: 高端网站建设 网站制作 自适应网站设计 成都商城网站建设 网站设计制作报价 成都网站建设 营销网站建设 成都定制网站建设 成都网站制作 营销网站建设 重庆手机网站建设 高端网站设计 营销型网站建设 网站建设费用 定制网站制作 古蔺网站建设 网站设计 成都网站制作 成都商城网站制作 成都网站设计 外贸网站设计方案 重庆网站建设