实现类似于wp的后台的登陆摇头效果和ajax提交验证的效果
2011-04-16 00:23
519 查看
<!-- 本例是为了实现类似于wp的后台的登陆摇头效果和ajax提交验证的效果。 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>shakehead</title>
<mce:style type="text/css"><!--
body{margin:0px;padding:0px;}
.header{
background:#3EA63B;
height:50px;
margin:0px;
padding:0px;
}
h1{text-align:center;}
.column{
width:400px;
height:400px;
padding:0px 50px 0px 50px;
text-align:center;
margin:0px auto;
position:absolute;/*为了实现左右滑动的效果需要设置为漂浮层。*/
left:430px;
}
.login{
width:300px;
height:400px;
padding:20px 40px 20px 40px;
text-align:left;
margin:0px auto;
-webkit-box-shadow: 5px 1px 20px #999;/*css3 box-shadw，从前往后的属性意义是：x轴偏移量 y轴偏移量 模糊程度 阴影颜色，但还是别设置的太离谱*/
-moz-box-shadow:5px 1px 20px #999;
box-shadow: 5px 1px 20px #999;
}
.login .submit{
background:url(images/bg1.png) repeat;
border-radius:10px; /*css3 对按钮使用圆角处理，方法是border-radius，属性值为圆角的程度*/
font-weight:bold;
color:#FFF;
border:1px #257ea8 solid;
width:50px;
height:30px;
margin-left:100px;
}
.login .submit:hover{/*原来hover属性并不是只对a有效，这里假设对于任何鼠标悬停的属性都有效，有待验证是不是对所有属性都有效*/
background:url(images/bg1.png) repeat;
border-radius:10px;
font-weight:bold;
color:#CCC;
border:1px #000 solid;
width:50px;
height:30px;
margin-left:100px;
cursor:pointer;/*鼠标悬浮的时候变为手型的标志，还有很多属性值，参见附近*/
}
.login label{
font-size:12px;
color:#666;
line-height:20px;
}
.login .input {
height:30px;
width:270px;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
font-size:16px;
color:#666;
}
.footer{
background:#1e313f;
height:50px;
margin:0px;
padding:0px;
}
--></mce:style><style type="text/css" mce_bogus="1">body{margin:0px;padding:0px;}
.header{
background:#3EA63B;
height:50px;
margin:0px;
padding:0px;
}
h1{text-align:center;}
.column{
width:400px;
height:400px;
padding:0px 50px 0px 50px;
text-align:center;
margin:0px auto;
position:absolute;/*为了实现左右滑动的效果需要设置为漂浮层。*/
left:430px;
}
.login{
width:300px;
height:400px;
padding:20px 40px 20px 40px;
text-align:left;
margin:0px auto;
-webkit-box-shadow: 5px 1px 20px #999;/*css3 box-shadw，从前往后的属性意义是：x轴偏移量 y轴偏移量 模糊程度 阴影颜色，但还是别设置的太离谱*/
-moz-box-shadow:5px 1px 20px #999;
box-shadow: 5px 1px 20px #999;
}
.login .submit{
background:url(images/bg1.png) repeat;
border-radius:10px; /*css3 对按钮使用圆角处理，方法是border-radius，属性值为圆角的程度*/
font-weight:bold;
color:#FFF;
border:1px #257ea8 solid;
width:50px;
height:30px;
margin-left:100px;
}
.login .submit:hover{/*原来hover属性并不是只对a有效，这里假设对于任何鼠标悬停的属性都有效，有待验证是不是对所有属性都有效*/
background:url(images/bg1.png) repeat;
border-radius:10px;
font-weight:bold;
color:#CCC;
border:1px #000 solid;
width:50px;
height:30px;
margin-left:100px;
cursor:pointer;/*鼠标悬浮的时候变为手型的标志，还有很多属性值，参见附近*/
}
.login label{
font-size:12px;
color:#666;
line-height:20px;
}
.login .input {
height:30px;
width:270px;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
font-size:16px;
color:#666;
}
.footer{
background:#1e313f;
height:50px;
margin:0px;
padding:0px;
}</style>
<mce:script type="text/javascript" src="js/jquery-1.5.min.js" mce_src="js/jquery-1.5.min.js"></mce:script>
<mce:script type="text/javascript"><!--
//这里用jQuery做这两个效果，因为jquery适合做特效，而且封装了$.ajax方法，你懂的
$(document).ready(function(){
$("#submit1").click(function(){ //对登录按钮绑定一个事件，当鼠标点击的时候，触发事件
//通过id选择器取得用户输入的用户名和密码
$name=$("#username").val();
$code=$("#userpassword").val();
//提交验证的方法，用的是jquery的$.ajax()方法
$.ajax({
//请求处理的地址
url:"http://192.168.0.190:8080/hqtech/fetchCake.do",
//数据格式，和远程处理已经约定
dataType:"jsonp",
//提供跨域访问的方法
jsonp:"callback",
//提交给服务器的数据
data:{"username":$name,"password":$code},
//数据处理成功后调用这个函数进行一些方法的实现，里面有两个值，一个是服务器返回的message，另一个是返回的boolean值
success:function(json){
//请求成功后，显示从服务器返回的信息
alert(json.message);
//当json.success的值为假的时候。执行摇头的效果
if(json.success==false){
//首先判断要晃动的元素的左右边距
var box_left = ($(window).width() - $("#column1").width()) / 2;
$("#column1").css({'left': box_left});
//重点在这里，通过循环控制晃动的效果，例如幅度和时间次数
for(var i=1;i<=5; i++){
$("#column1").animate({left:box_left-(50-10*i)},80);
$("#column1").animate({left:box_left+2*(50-10*i)},80);
$("#column1").css({'left': box_left});
}
}
//如果验证成功跳转到另外一个页面，常用于登录操作
else{
window.location.href="http://www.baidu.com";
}
}
});
});
});
// --></mce:script>
</head>
<body>
<div class="header"></div>
<h1><img src="images/logo.jpg" mce_src="images/logo.jpg" width="300px" /></h1>
<div class="column" id="column1">
<div class="login">
<form action="" name="myform" method="post">
<p> <label>用户名<br />
<input type="text" name="username" id="username" class="input" />
</label></p>
<p><label>密码<br />
<input type="password" name="userpassword" id="userpassword" class="input"/>
</label></p>
<p><label><input type="checkbox" value="remember" />记住密码 </label><input type="BUTTON" name="submit" value="登录" class="submit" id="submit1"/></p>
</form>
</div>
</div>
</body>
</html>附：cursor属性收集
光标类型 CSS
十字准心 cursor: crosshair;
手 cursor: pointer;
cursor: hand;
写两个是为了照顾IE5，它只认hand。
等待/沙漏 cursor: wait;
帮助 cursor: help;
无法释放 cursor: no-drop;
文字/编辑 cursor: text;
可移动对象 cursor: move;
向上改变大小(North) cursor: n-resize;
向下改变大小(South) cursor: s-resize;
向右改变大小(East) cursor: e-resize;
向左改变大小(West) cursor: w-resize;
向上右改变大小(North East) cursor: ne-resize;
向上左改变大小(North West) cursor: nw-resize;
向下右改变大小(South East) cursor: se-resize;
向下左改变大小(South West) cursor: sw-resize;
自动 cursor: auto;
禁止 cursor:not-allowed;
处理中 cursor: progress;
系统默认 cursor: default;
用户自定义（可用动画） cursor: url(‘ # ‘);
# = 光标文件地址 (注意文件格式必须为：.cur 或 .ani)。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS实现AJAX提交数据到后台,实现验证用户名是否存在功能详解
- JS实现AJAX提交数据到后台,实现验证用户名是否存在功能详解
- JS实现AJAX提交数据到后台,实现验证用户名是否存在功能详解
- ajax提交请求到后台以及页面数据的一些验证
- Ajax提交分页请求，实现异步刷新效果(1)
- form提交不刷新页面、不用AJAX 也能实现类似"异步更新"效果
- ExtJs 4中 Ext.Ajax.request提交实现waitMsg等待提示效果
- JavaScript解决一个带验证的Form两个Submit事件（一个页面保持不动【AJAX实现】，一个页面提交并跳转）的场景
- Ajax.net实现loading登陆的效果
- 通过AJAX调用页面后台代码方法实现省级三级联动效果 （简单练习）前台
- Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
- JFinal中前台用Ajax实现表单提交，后台用renderJson传数据（二）
- Ajax.net实现loading登陆的效果
- Ajax 实现页面数据 后台验证
- 运用Ajax和JQuery来实现表单提交效果
- 用AJAX实现页面登陆以及注册用户名验证
- 使用Ajax实现无刷新用户名验证和分页的效果（一）
- Asp.net 登陆页面的Ajax异步身份验证的实现
- django 用ajax+post提交form 实现前后台数据绑定
- ajax实现注册页面动态验证用户名是否已注册，不必提交即可验证