漂亮的登陆界面HTML

微凉 · 发表于 2013-5-26 05:49:39

今天做了后台登陆，有特效的噢。直接上个下载地址给大家下载

http://pan.baidu.com/share/link?shareid=417851&uk=4180563440

总结一下学到的特效，获得焦点事件focus 失去焦点事件 blus 按下某键事件 keypress

[javascript] view plaincopy

// JavaScript Document
// 作者QQ 496928838 博客 http://wl.125.la
$(document).ready(function(e) {
//获取用户文本框
var userName=$("#userName");
//获取用户密码框
var password=$("#password");
//获取文本框前面图片
var userimg=$("#userimg");
//获取密码框前面图片
var pwimg=$("#pwimg");
//给用户文本框置焦点
userName.focus();
//绑定用户文本框焦点事件，失去焦点事件，按下某件事件
userName.focus(function(){
userimg.css("background-position","0px");
}).blur(function(){
userimg.css("background-position","-33px");
}).keypress(function(e){
var key=e.which;
if(key==13){
password.focus();
}
});
//绑定密码文本框焦点事件，失去焦点事件，按下某件事件
password.focus(function(){
pwimg.css("background-position","-66px");
}).blur(function(){
pwimg.css("background-position","-99px");
}).keypress(function(e){
var key=e.which;
if(key==13){
$("#login").click();
}
});
//绑定登陆按钮点击事件，移入事件，移出事件
$("#login").click(function(){
//获取用户名称
var strUsetName = $("#userName").val();
//获取用户输入密码
var strPassword = $("#password").val();
var msg=$("#msg");
$.ajax({
url:'admin.php?m=admin&a=login',
type:'POST',
dataType:'json',
data:{
userName:strUsetName,
password:strPassword
},
success: function(json){
if (json.state=='ok') {
msg.html("登陆成功");
}else{
msg.html(json.error);
}
}
});
}).mousemove(function(){
$(this).css("background-position","-138px");
}).mouseout(function(){
$(this).css("background-position","0px");
});
});

请求的ajax方法

[php] view plaincopy

public function login()
{
$json['state']='no';
if (!empty($_POST['userName']) && !empty($_POST['password'])) {
$userName=$_POST['userName'];
$password=md5($_POST['password']);
/*var_dumP($_POST);
var_dump($password);
var_dump($password);*/
if($_SESSION['userData']=$this->db->where("userName='{$userName}' and password='{$password}'")->fine()){
$json['state']='ok';
// echo "<script>window.location.href='admin.php?m=admin&a=admin';</script>";
$_SESSION['login']=true;
}else{
$json['error']='用户不存在或密码错误';
}
}else {
$json['error']='请输入用户名和密码';
}
echo json_encode($json);
//$this->display();
}

liu307921917 · 发表于 2013-5-26 06:43:46

不错，htlm开发

liu307921917 · 发表于 2013-5-26 06:44:41

网盘不能下载啊，请楼主重新上传一下吧

宇智波·晓易 · 发表于 2013-5-26 06:59:35

越来越给力了。

淡笑醉浮生 · 发表于 2013-5-26 07:02:08

高手就是与众不同

r930328578 · 发表于 2013-5-26 07:23:09

哇好牛B，高手就是高手

浅浅` · 发表于 2013-5-26 07:53:19

楼主亮了。。

玄月清风 · 发表于 2013-5-26 08:57:09

高手啊.....

兔纸兄 · 发表于 2013-5-26 09:06:27

哎呀妈呀微凉什么时候撸出来了

素顏じ亦傾城ジ · 发表于 2013-5-26 10:09:37

............... 专业路过.....

		自动登录	找回密码
密码			注册

[分享] 漂亮的登陆界面HTML