<!-- 本例是为了实现类似于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)。
