Jquery导航条淡进淡出相册（动态无刷新加载数据库数据）

淩亂°似流年 2021-12-20 07:25 87阅读 0赞

原理：AJAX动态加载数据库中图片信息给游览器，利用2个叠词div动态修改内部图片透明度做出淡进淡出效果。（IE6无效)

难点：json数组操作。

HTML：就是几个图片容器。加载大图的div position: absolute;

CSS:加载大图的div position: absolute;

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

JS :看代码

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

后台处理程序photo.ashx：（请求json数据和图片总数）

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

public void ProcessRequest(HttpContext context)
        {
            string num = context.Request["num"];
            int inum;
            if (num != null)
            {
                if (int.TryParse(num, out inum))
                {
                    SqlParameter[] sqlp = new SqlParameter[]{ //获取7行数据
                    new SqlParameter("@min",SqlDbType.Int),
                    new SqlParameter("@max",SqlDbType.Int)
                    };
                    sqlp[0].Value = inum*7;
                    sqlp[1].Value = (inum+1)*7;
                    DataSet ds = SqlHelper.ExecuteDataset(SqlHelper.connectionString, "proc_photolinks", sqlp);
                    context.Response.Write(Dataset2Json(ds)); //转成Json
                }
                else
                {             
                    context.Response.Write("h");
                }
            }
            else if (context.Request["count"]!=null)
            {
                context.Response.Write(SqlHelper.ExecuteScalar(SqlHelper.connectionString, "proc_photocount").ToString());
            }
            else{
                
            }
        }
        
        public static string Dataset2Json(System.Data.DataSet ds)
        {
            StringBuilder json = new StringBuilder();
            json.Append("[");
            foreach (System.Data.DataTable dt in ds.Tables)
            {
                json.Append(DataTable2Json(dt));
                json.Append(",");
            }
            json.Remove(json.Length - 1, 1);
            json.Append("]");
            return json.ToString();
        }
        public static string DataTable2Json(System.Data.DataTable dt)
        {
            StringBuilder jsonBuilder = new StringBuilder();
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                jsonBuilder.Append("{
          ");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    jsonBuilder.Append("\"");
                    jsonBuilder.Append(dt.Columns[j].ColumnName);
                    jsonBuilder.Append("\":\"");
                    jsonBuilder.Append(dt.Rows[i][j].ToString().Replace("\"", "\\\"").Trim()); //对于特殊字符，还应该进行特别的处理。 
                    jsonBuilder.Append("\",");
                }
                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                jsonBuilder.Append("},");
            }
            jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
            return jsonBuilder.ToString();
        } 
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

思路：加载好网页元素后异步请求一组图片数据操作显示，后每需要加载新的一组图片再异步请求数据库获取新的图片地址（和分页差不多，可以减小数据库压力），

再动态加载到页面上。主要是图片变换的逻辑JS代码和Json数据的处理。

转载于:https://www.cnblogs.com/lideyang/archive/2012/10/30/2746784.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211220/3252099275524518a12d817c71e08ea9.png