div彈出層的ajax登錄（Jquery版）

今天別人都在休息，還要上班，自我安慰一下，他人笑我沒長假，我笑他人沒事幹！

本人不善於jquery，也不善於p+css的排版,今天把vs2008打瞭個補丁，然後摸索瞭2個多小時做完這個例子和博客，手都敲軟瞭，在這裡和大傢分享學習下！

p彈出層，我沒有點擊事件，是頁面一加載就彈出來，你也可以改成$("#id").click(function(){});放這裡面就可以點擊某個id事件來彈出層瞭，上預覽圖：

頁面加載完成時：

當驗證碼得到焦點時：

實現這個ajax為瞭節約時間，用戶名/密碼/驗證碼我都沒判斷是否為空，我也沒用數據庫，登錄用戶名和密碼都是admin

登錄成功時：

這裡說明一下，由於時間有限，你可以把這個登錄成功或者登錄失敗，效果做一下，直接在登錄窗口上放一個<p id="message"><p>然後設置其樣式，把提示內容追加上去，根據自己個人需求來，下面貼我的全部代碼：

靜態頁面login.html代碼如下圖所示

：

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2 <html xmlns="http://www.w3.org/1999/xhtml">

3 <head>

4 <title>mydream_後臺登錄</title>

5 <link href="css/login.css" rel="stylesheet" type="text/css" />

6 <script src="../js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

7 <script src="js/login.js" type="text/javascript"></script>

8 </head>

9 <body>

10 <p id="login" class="login">

11 <p class="title"><b>管理員登錄</b></p>

12 <p class="pad">

13 <p><p class="selectinput loginpsw"><label>用戶名：</label><input type="text" tabindex="1" class="txt" size="36" name="username" id="txtName" /></p></p>

14 <p><p class="selectinput loginpsw"><label>密   碼：</label><input type="password" tabindex="1" class="txt" size="36" name="password" id="txtPassword" /></p></p>

15 <p><p><p class="selectinput loginpsw"><label>驗證碼：</label><input type="text" tabindex="1" class="txt" size="36" name="code" id="txtCode"/></p></p></p>

16 <p><input id="btnLogin" type="button" value="登錄" /></p>

17 </p>

18 <p class="pCode"><img alt="驗證碼" title="點擊刷新驗證碼" src="../ashx/verifyCode.ashx" /></p>

19 </p>

20 </body>

21 </html>

1 .selectinput{margin-bottom:10px;width:224px;height:20px;background-color:#FFF;border:1px solid;border-color:#999 #CCC #CCC #999;}

2 .selectinput .txt{float:left;width:165px;border:none;}

3 .loginpsw label{float:left;display:inline;margin:0 0 0 4px;width:50px;height:auto;line-height:150%; color:#339900}

4 body,td,input,textarea,select,button{color:#666;font:12px/1.6em Verdana,Helvetica,Arial,sans-serif;}

5 input,select,button{vertical-align:middle;}

6 .txt,.txtarea{padding:2px;*padding:0 2px;height:16px;*height:20px;border:1px solid;border-color:#999 #CCC #CCC #999;background:#FFF;}

7 body{ margin:0 auto;}

8 .login{border:solid 3px #339900; width:360px; height:223px;display:none; z-index:101;position:absolute; background-color:#FFFFFF;}

9 .login .title{width:100%;height:30px;line-height:30px; border-bottom:solid 1px #339900;}

10 .login .title b{ padding-left:5px; color:#000000;}

11 .login .pad{padding-left:35px;}

12 .login .pCode{width:80px; height:30px;position:relative;top: -32px;left:170px; display:none;}

13 .login #btnLogin{width:55px; height:28px;}

14 #greybackground{background:#000000;width:100%; display:block; z-index:100; top:0px; left:0px; position:absolute;}

1 /// <reference path="http://www.cnblogs.com/js/jquery-1.4.1-vsdoc.js" />

2 $(document).ready(function() {

3 var screenwidth, screenheight, mytop, getPosLeft, getPosTop

4 screenwidth = $(window).width();

5 screenheight = $(window).height();

6 //獲取滾動條距頂部的偏移

7 mytop = $(document).scrollTop();

8 //計算彈出層的left

9 getPosLeft = screenwidth / 2 – 200;

10 //計算彈出層的top

11 getPosTop = screenheight / 2 – 150;

12 //css定位彈出層

13 $("#login").css({ "left": getPosLeft, "top": getPosTop });

14 //當瀏覽器窗口大小改變時

15 $(window).resize(function() {

16 screenwidth = $(window).width();

17 screenheight = $(window).height();

18 mytop = $(document).scrollTop();

19 getPosLeft = screenwidth / 2 – 200;

20 getPosTop = screenheight / 2 – 150;

21 $("#login").css({ "left": getPosLeft, "top": getPosTop + mytop });

22 });

23 //當拉動滾動條時，彈出層跟著移動

24 $(window).scroll(function() {

25 screenwidth = $(window).width();

26 screenheight = $(window).height();

27 mytop = $(document).scrollTop();

28 getPosLeft = screenwidth / 2 – 200;

29 getPosTop = screenheight / 2 – 150;

30 $("#login").css({ "left": getPosLeft, "top": getPosTop + mytop });

31 });

32 //失去焦點與得到焦點

33 $("#txtCode").focus(function() {

34 $(".pCode").fadeIn(1200);

35 });

36 $("#txtCode").blur(function() {

37 $(".pCode").fadeOut();

38 });

39 $("#login").fadeIn("slow"); //toggle("slow");

40 //獲取頁面文檔的高度

41 var docheight = $(document).height();

42 //追加一個層，使背景變灰

43 $("body").append("<p id='greybackground'></p>");

44 $("#greybackground").css({ "opacity": "0.1", "height": docheight });

45 //登錄

46 $("#btnLogin").click(function() {

47 $.get("../ashx/login.ashx",

48 { name: $("#txtName").val(),

49 pwd: encodeURIComponent($("#txtPassword").val()),

50 code: $("#txtCode").val()

51 },

52 function(data) {

53 switch (data) {

54 case "code error":

55 alert("驗證碼錯誤！");

56 break;

57 case "success":

58 alert("登錄成功！");

59 break;

60 case "false":

61 alert("登錄失敗！");

62 break;

63 default:

64 alert("數據加載失敗，請稍後再試！");

65 break;

66 }

67 });

68 });

69 });

1 <%@ WebHandler Language="C#" Class="login" %>

3 using System;

4 using System.Web;

5 using System.Web.SessionState;

7 public class login : IHttpHandler, IRequiresSessionState

8 {

9 public void ProcessRequest(HttpContext context)

10 {

11 string code = context.Request.QueryString["code"];

12 context.Response.ContentType = "text/plain";

13 if (code.ToLower() != context.Session["checkCode"].ToString())

14 {

15 context.Response.Write("code error");

16 }

17 else

18 {

19 string name = context.Request.QueryString["name"];

20 string pwd = HttpUtility.UrlDecode(context.Request.QueryString["pwd"]);

21 if (name == "admin" && pwd == "admin")

22 {

23 context.Response.Write("success");

24 }

25 else

26 {

27 context.Response.Write("false");

28 }

29 }

30 }

32 public bool IsReusable

33 {

34 get

35 {

36 return false;

37 }

38 }

40 }

verifyCode

1 <%@ WebHandler Language="C#" Class="verifyCode" %>

3 using System;

4 using System.Web;

5 using System.Web.SessionState;//第一步導入命名空間

6 using System.Drawing;

8 public class VerifyCode : IHttpHandler, IRequiresSessionState

9 {//第二步實現接口就和平常一樣可以使用session

11 public void ProcessRequest(HttpContext context)

12 {

13 string checkCode = this.CreateRandomCode(4).ToLower();

14 context.Session["checkCode"] = checkCode;

15 this.CreateImage(context, checkCode);

16 }

18 public bool IsReusable

19 {

20 get

21 {

22 return false;

23 }

24 }

26 /// <summary>

27 /// 按位生成隨機

28 /// </summary>

29 /// <param name="codeCount"></param>

30 /// <returns></returns>

31 private string CreateRandomCode(int codeCount)

32 {

33 int number;

34 string checkCode = String.Empty;

35 Random random = new Random();

36 for (int i = 0; i < codeCount; i++)

37 {

38 number = random.Next(100);

39 switch (number % 3)

40 {

41 case 0:

42 checkCode += ((char)('0' + (char)(number % 10))).ToString();

43 break;

44 case 1:

45 checkCode += ((char)('a' + (char)(number % 26))).ToString();

46 break;

47 case 2:

48 checkCode += ((char)('A' + (char)(number % 26))).ToString();

49 break;

50 default:

51 break;

52 }

53 }

54 return checkCode;

55 }

57 /// <summary>

58 /// 根據字符生成圖片

59 /// </summary>

60 /// <param name="context"></param>

61 /// <param name="checkCode"></param>

62 private void CreateImage(HttpContext context,string checkCode)

63 {

64 int randAngle = 45;//隨機轉動角度

65 int iwidth = (int)(checkCode.Length * 23);

66 //封裝GDI+ 位圖，此位圖由圖形圖像及其屬性的像素數據組成，指定的寬度和高度。以像素為單位

67 System.Drawing.Bitmap image = new System.Drawing.Bitmap(iwidth, 28);

69 //封裝一個　GDI+繪圖圖面。無法繼承此類。從指定的Image創建新的Graphics

70 Graphics g = Graphics.FromImage(image);

72 //清除整個繪圖面並以指定背景填充

73 g.Clear(Color.AliceBlue);

75 //畫一個邊框

76 g.DrawRectangle(new Pen(Color.Black, 0), 0, 0, image.Width – 1, image.Height – 1);

78 //定義繪制直線和曲線的對象。（隻是Pen的顏色，指示此Pen的寬度的值）

79 Pen blackPen = new Pen(Color.LightGray, 0);

81 Random rand = new Random();

83 //劃橫線的條數可以根據自己的要求

85 for (int i = 0; i < 50; i++)

86 {

87 //隨機高度

88 //int y = rand.Next(image.Height);

89 /*繪制一條連線由坐標對指定的兩個點的線條

90 線條顏色、寬度和樣式，第一個點的x坐標和y坐標，第二個點的x坐標和y坐標*/

91 //g.DrawLine(blackPen, 0, y, image.Width, y);

92 int x = rand.Next(0, image.Width);

93 int y = rand.Next(0, image.Height);

94 //畫矩形，坐標（x,y）寬高(1,1)

95 g.DrawRectangle(blackPen, x, y, 1, 1);

96 }

98 //拆散字符串成單個字符數組

99 char[] chars = checkCode.ToCharArray();

100

101 //文字居中

102 StringFormat format = new StringFormat(StringFormatFlags.NoClip);

103 format.Alignment = StringAlignment.Center;

104 format.LineAlignment = StringAlignment.Center;

105

106 //定義顏色

107 Color[] c = { Color.Black, Color.DarkGray, Color.DarkOrange, Color.Red, Color.DarkBlue, Color.Green, Color.Orange, Color.Brown, Color.DarkCyan, Color.Purple };

108 //定義字體

109 string[] font = { "Verdana", "Microsoft Sans Serif", "Comic Sans MS", "Arial", "宋體", "Arial Baltic" };

110

111 for (int i = 0; i < chars.Length; i++)

112 {

113 int cindex = rand.Next(c.Length);

114 int findex = rand.Next(font.Length);

115

116 //font　封裝在特定設備上呈現特定字體所需的紋理和資源（字體，大小，字體樣式）

117 Font f = new System.Drawing.Font(font[findex], 16, System.Drawing.FontStyle.Bold);

118

119 /*Brush定義用於填充圖形圖像（如矩形、橢圓、圓形、多邊形和封閉路徑）的內部對象

120 SolidBrush(Color.White)初始化指定的顏色　指定畫筆顏色為白色*/

121 Brush b = new System.Drawing.SolidBrush(c[cindex]);

122

123 Point dot = new Point(16, 16);

124

125 //轉動的度數

126 float angle = rand.Next(-randAngle, randAngle);

127

128 //移動光標到指定位置

129 g.TranslateTransform(dot.X, dot.Y);

130 g.RotateTransform(angle);

131 /*在指定的位置並且用指定的Brush和Font對象繪制指定的文本字符串

132 （指定的字符串，字符串的文本格式，繪制文本顏色和紋理，所繪制文本的左上角的x坐標，坐標）*/

133 g.DrawString(chars[i].ToString(), f, b, 1, 1, format);

134 //轉回去

135 g.RotateTransform(-angle);

136 //移動光標指定位置

137 g.TranslateTransform(2, -dot.Y);

138 }

139 //創建存儲區為內存流

140 System.IO.MemoryStream ms = new System.IO.MemoryStream();

141

142 //將此圖像以指定的格式保存到指定的流中（將其保存在內存流中，圖像的格式）

143 image.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);

144

145 //清除緩沖區將流中的內容輸出

146 context.Response.ClearContent();

147

148 //獲取輸出流的類型

149 context.Response.ContentType = "image/Jpeg";

150

151 //將二進制字符串寫入HTTP輸出流

152 context.Response.BinaryWrite(ms.ToArray());

153

154 g.Dispose();

155

156 image.Dispose();

157 }

158 }有瞭以上文件，就可以做你想要的談出p層效果瞭，我js不是很擅長，有好的意見歡迎拍磚，不要噴，謝謝！

下載地址，點擊這裡

一切偉大的行動和思想，都有一個微不足道的開始。微不足道的我，正在吸取知識的土壤，希望能取得成功！不嫌棄我微不足道的，願交天下好友！

Related posts:

發佈留言 取消回覆

發佈留言取消回覆