周末了找个网页特效练练手

写在前面的话

作为一个程序员，经常逛博客园是一个非常好的习惯，若周末依然有这个习惯好好发扬哟！似乎园子在星期一到星期五期间比较活跃，到了周六周日冷清了不少，难道大神们都幽会去了？小弟孤身身处上海，寂寞难耐，闲来无事，发此感慨，切勿吐槽！

废话少说，切入正题......

关于具体内容

今天我要完成的是一个图片浏览功能页面，有点类似于百度图片，但又有些不同。下面我以列举的方式写出具体要做的:

要求：

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