周末了找個網頁特效練練手

本文轉載自查看原文 2013-09-08 18:28 3208 Web前端

寫在前面的話

作為一個程序員，經常逛博客園是一個非常好的習慣，若周末依然有這個習慣好好發揚喲！似乎園子在星期一到星期五期間比較活躍，到了周六周日冷清了不少，難道大神們都幽會去了？小弟孤身身處上海，寂寞難耐，閑來無事，發此感慨，切勿吐槽！

廢話少說，切入正題......

關於具體內容

今天我要完成的是一個圖片瀏覽功能頁面，有點類似於百度圖片，但又有些不同。下面我以列舉的方式寫出具體要做的:

要求：

1.頁面首次加載 m 張圖片，以列表形式展現

2.頁面底端給出一個鏈接，點擊鏈接繼續獲取緊跟在后面的 n 張圖片

3.加載 n 張圖片時給出提示，以保證界面友好

4.點擊任意一張圖片，彈出一個層，顯示點擊圖片的大圖，同時其他圖片不可用（彈出遮罩）

5.頁面首次加載之后不允許有任何刷新

看完這個圖片我們該如何下手呢，考慮下下咯！！！

Working

下面列出我們需要做的：

1.HTML頁面

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AfterLoad.Default" %>
 2 
 3 <!DOCTYPE html>
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head runat="server">
 7     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8     <title></title>
 9     <link href="Styles/Site.css" rel="stylesheet" />
10     <script src="Javascripts/jquery-1.7.1.js"></script>
11     <script src="Javascripts/LoadImage.js"></script>
12 </head>
13 <body>
14     <form id="form1" runat="server">
15         <div class="maincontent">
16             <div id="imageList">
17                 <ul>
18                     <asp:Repeater ID="rptImageList" runat="server">
19                         <ItemTemplate>
20                             <li>
21                                 <img src="<%#Eval("img") %>" />
22                             </li>
23                         </ItemTemplate>
24                     </asp:Repeater>
25                 </ul>
26             </div>
27             <div id="Loading" class="onLoading">獲取更多圖片信息</div>
28         </div>
29         <div class="detail">
30             <em><img class="close" src="Images/img/close.png" /></em>
31             <img class="detailImg" src="" />
32         </div>
33     </form>
34 </body>
35 </html>

View Code

HTML 頁面很簡單，沒有任何數據，僅給出結構

2.CSS文件

 1 /*通用樣式*/
 2 body,div,p,ul,li,span {
 3     margin: 0;
 4     padding: 0;
 5 }
 6 body {
 7     background-color: #20b2aa;
 8 }
 9 .maincontent {
10     width: 1000px;
11     margin: 10px auto;
12     position: relative;
13     z-index: 0;
14 }
15 
16 /*列表布局*/
17 li {
18     list-style: none;
19     width: 240px;
20     height: 160px;
21     float: left;
22     margin: 5px;
23     cursor: pointer;
24 }
25 li img {
26     width: 240px;
27     height: 160px;
28     border: 1px solid #fffff0;
29 }
30 
31 /*加載狀態*/
32 .onLoading {
33     cursor: pointer;
34     clear: left;
35     height: 30px;
36     padding: 10px 0 0 435px;
37     color: #fffff0;
38 }
39 
40 /*詳細圖片，也就是放大后的視圖*/
41 .detail {
42     width: 800px;
43     height: 500px;
44     position: fixed;
45     left: 50%;
46     top: 50%;
47     background-color: #778899;
48     margin-left: -400px;
49     margin-top: -250px;
50     border: #fffff0 5px solid;
51     z-index: 100;
52     border-radius: 5px;
53     display: none;
54 }
55 .detailImg {
56     width: 800px;
57     height:500px;
58 }
59 
60 /*彈出層關閉按鈕*/
61 .close {
62     width: 40px;
63     height: 40px;
64     position: absolute;
65     right: -15px;
66     top: -15px;
67 }
68 .close:hover {
69     opacity: 0.95;
70 }

View Code

HTML的渲染全部在以上代碼

3.Javascript文件

  1 /*
  2  * 圖片延時加載與預覽
  3  * http://www.cnblogs.com/vchenpeng/
  4  * Date: 2013-9-8 
  5  */
  6 
  7 $(document).ready(function () {
  8     /*------------------可變值Begin------------------*/
  9     var loadCount = 8;   //加載圖片數量
 10     var skipCount = 24;  //跳過圖片數量
 11     var timer;           //定時器，使看到加載情況
 12     var delay = 5000;    //設定5秒之后加載圖片，實際運行盡量減小該值
 13     var index = 2;       //遮罩層的層疊次序，必須保證在圖片列表的上面，彈出層的下面，這里是0-100之間
 14     /*------------------可變值 End ------------------*/
 15 
 16     /*異步加載圖片*/
 17     function loadImages(lc, sc) {
 18         $.ajax({
 19             url: "Default.aspx/LoadImages",
 20             type: "POST",
 21             data: "{ loadCount:" + lc + ", skipCount:" + sc + " }",
 22             contentType: "application/json; charset=utf-8",
 23             dataType: "json",
 24             beforeSend: function() {
 25                 //loading();
 26             },
 27             error: function () {
 28                 alert("加載失敗");
 29             },
 30             success: function (data) {
 31                 if (data != null) {
 32                     $("#imageList ul").append(data.d);
 33                     skipCount += loadCount;
 34                 }
 35             },
 36             complete: function () {
 37                 window.clearInterval(timer);
 38                 $('#Loading').html("獲取更多圖片信息");
 39             }
 40         });
 41     }
 42 
 43     function vitoc() {
 44         loadImages(loadCount, skipCount);
 45     }
 46 
 47     //事件觸發
 48     $('#Loading').click(function () {
 49         $('#Loading').html("圖片正在加載,請稍后");
 50         loading();
 51         setTimeout(vitoc, delay);    //為了看到加載期間的過程，此處延時delay秒，真正運行時去掉setTimeout
 52     });
 53     
 54     /*---------------控制標簽id為Loading的文字 Begin ---------------*/
 55     function loading() {
 56         var i = -1;
 57         timer=setInterval(function() {
 58             var temp = loadingWord($('#Loading').html(), ".");
 59             i = (i >= 6) ? 0 : ++i;
 60             $('#Loading').html(temp);
 61             if (i == 6) $('#Loading').html("圖片正在加載,請稍后");
 62         }, 500);
 63     }
 64 
 65     function loadingWord(baseWord, loadWord) {
 66         var word = baseWord;
 67         word += loadWord;
 68         return word;
 69     }
 70     /*---------------控制標簽id為Loading的文字  End  ---------------*/
 71 
 72     $(".close").click(function () {
 73         $(".detail").fadeOut(400);
 74         removeMask();
 75     });
 76 
 77     /*顯示圖片詳細，也就是大圖顯示*/
 78     var tag = document.getElementById("imageList");
 79     var detail = document.getElementsByClassName("detail")[0];
 80     tag.addEventListener("click", function (e) {
 81         createMask(index);
 82         $(".detail").fadeIn(800);
 83         $(".detailImg").attr("src", e.target.src);
 84     });
 85     
 86     /*雙擊關閉大圖*/
 87     detail.addEventListener("dblclick", function (e) {
 88         $(e.target.parentNode).fadeOut(400);
 89         removeMask();
 90     }, true);
 91 
 92     /*彈出一個遮罩層*/
 93     function createMask(index) {
 94         var layer = document.createElement("div");
 95         layer.id = "layer";
 96         layer.style.width = layer.style.height = "100%";
 97         layer.style.position = "fixed";
 98         layer.style.top = layer.style.left = 0;
 99         layer.style.backgroundColor = "#000";
100         layer.style.zIndex = index;
101         layer.style.opacity = "0.7";
102         document.body.appendChild(layer);
103     }
104     
105     /*消除遮罩層*/
106     function removeMask() {
107         $("#layer")[0].parentNode.removeChild($("#layer")[0]);
108     }
109 });

View Code

此文件最重要了，主要代碼在這個文件，可以好好看看咯

4.C#后台代碼

 1 using System;
 2 using System.Collections.Generic;
 3 using System.IO;
 4 using System.Linq;
 5 using System.Text;
 6 using System.Web;
 7 using System.Web.Services;
 8 
 9 namespace AfterLoad
10 {
11     public partial class Default : System.Web.UI.Page
12     {
13         protected void Page_Load(object sender, EventArgs e)
14         {
15             if (!IsPostBack) LoadImages(24);
16         }
17 
18         /// <summary>
19         /// 頁面首次加載
20         /// </summary>
21         /// <param name="loadCount">讀取圖片數量</param>
22         private void LoadImages(int loadCount)
23         {
24             string path = HttpContext.Current.Server.MapPath("~/Images");
25             string siteRoot = HttpContext.Current.Server.MapPath("~");
26             var imageList = (from images in Directory.GetFiles(path) select new { img = images.Replace(siteRoot, "") }).Take(loadCount).ToList();
27             rptImageList.DataSource = imageList;
28             rptImageList.DataBind();
29         }
30 
31         /// <summary>
32         /// 異步加載圖片
33         /// </summary>
34         /// <param name="loadCount">加載圖片數量</param>
35         /// <param name="skipCount">忽略圖片數量</param>
36         /// <returns></returns>
37         [WebMethod]
38         public static string LoadImages(int loadCount, int skipCount)
39         {
40             string path = HttpContext.Current.Server.MapPath("~/Images");
41             string siteRoot = HttpContext.Current.Server.MapPath("~");
42             var imageList = (from images in Directory.GetFiles(path) select new { img = images.Replace(siteRoot, "") }).Skip(skipCount).Take(loadCount).ToList();
43             StringBuilder sb = new StringBuilder();
44             foreach (var image in imageList)
45             {
46                 string imageSrc = image.img.Replace("\\", "/");
47                 string temp = new Default().SpliceTag(Convert.ToString(imageSrc)).ToString();
48                 sb.AppendFormat(temp);
49             }
50             return sb.ToString();
51         }
52 
53         /// <summary>
54         /// 拼接列表標簽
55         /// </summary>
56         /// <param name="imageSrc">圖片路徑</param>
57         /// <returns></returns>
58         public StringBuilder SpliceTag(string imageSrc)
59         {
60             StringBuilder sb = new StringBuilder();
61             sb.AppendFormat("<li>");
62             sb.AppendFormat(string.Format("<img src='{0}' />", imageSrc));
63             sb.AppendFormat("</li>");
64             return sb;
65         }
66     }
67 }