.net2003+ajax淘宝上的查看图片的那效果

今天刚到公司看到群里有朋友问了这个效果,因为没什么事所以写了一个与大家分享一下.

1.建两张页面main.aspx,selpic.aspx
在main.aspx页面中写js代码如下:


var xmlhttp=false;


function GetXmlHttp()




...{


try




...{


xmlhttp=new ActiveXObject("Msxml2.XMLHTTP3.0");


}


catch(e)




...{


try




...{


xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");


}


catch(e)




...{


xmlhttp=false;


}


}


return xmlhttp;


}


function pic(id)




...{


GetXmlHttp()


var url="selpic.aspx?id="+id;


xmlhttp.onreadystatechange=callback;


xmlhttp.open("post",url,true);


xmlhttp.send();


}


function callback()




...{


var imag=document.getElementById("im");


var div1=document.getElementById("div1");


var div2=document.getElementById("div2");


if(xmlhttp.readyState==1)




...{


div2.style.visibility="visible";


}


else if(xmlhttp.readyState==4)




...{


div2.style.visibility="hidden";


div1.style.visibility="visible";


var info=xmlhttp.responseText;


imag.src=info;


//alert(info);


}


}


function hid()




...{


var div1=document.getElementById("div1");


var div2=document.getElementById("div2");


div2.style.visibility="hidden";


div1.style.visibility="hidden";


}

html中放一个DataList,两个层和一个图片控件,如下代码:


<form id="Form1" method="post" runat="server">


<asp:DataList id="DataList1" style="Z-INDEX: 101; LEFT: 128px; POSITION: absolute; TOP: 48px"


runat="server">


<ItemTemplate>


<FONT face="宋体">


<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="300" border="1">


<TR>


<TD align="center">名称</TD>


<TD align="center">图片</TD>


<TD align="center">时间</TD>


</TR>


<TR>




<TD align="center"><%...# DataBinder.Eval(Container.DataItem,"uname")%></TD>


<TD align="center">




<IMG style="WIDTH: 105px; HEIGHT: 88px" height="88" alt="" src='<%# DataBinder.Eval(Container.DataItem,"picpath")%>' width="105" onmouseover="pic('<%...# DataBinder.Eval(Container.DataItem,"uname")%>');" onmouseout="hid();">


</TD>




<TD align="center"><%...# DataBinder.Eval(Container.DataItem,"datetime","{0:D}")%></TD>


</TR>


</TABLE>


</FONT>


</ItemTemplate>


</asp:DataList>


<DIV id="div1" style="DISPLAY: inline; Z-INDEX: 102; LEFT: 456px; VISIBILITY: hidden; WIDTH: 448px; POSITION: absolute; TOP: 176px; HEIGHT: 428px"


ms_positioning="FlowLayout">


<IMG style="WIDTH: 448px; HEIGHT: 428px" height="428" alt="" src="" width="448" id="im">


</DIV>




<DIV id="div2" style="DISPLAY: inline; Z-INDEX: 102; LEFT: 456px; VISIBILITY: hidden; WIDTH: 448px; POSITION: absolute; TOP: 176px; HEIGHT: 428px"


ms_positioning="FlowLayout">




<font color=#ff99cc size="7">Loading...</font>




</DIV>


</form>

下面在main.aspx的窗体中写如下代码查出数据库中的数据绑定到DataList


private void Page_Load(object sender, System.EventArgs e)




...{


// 在此处放置用户代码以初始化页面


if(!this.IsPostBack)




...{


this.Bind();


}


}




private void Bind()




...{


try




...{


SqlConnection conn=new SqlConnection("server=.;database=Test;uid=sa;pwd=sa");


SqlDataAdapter da=new SqlDataAdapter("select * from taobao",conn);


DataSet ds=new DataSet();


da.Fill(ds,"ddd");


this.DataList1.DataSource=ds;


this.DataList1.DataBind();


}


catch(Exception Err)




...{


Response.Write(Err.Message);


}




}

2.在selpic.aspx页面中写如下代码:(注:根据传过来的id查出图片地址返回给main.aspx页面)


private void Page_Load(object sender, System.EventArgs e)




...{


// 在此处放置用户代码以初始化页面


if(!this.IsPostBack)




...{


this.Bind();


}


}


private void Bind()




...{


try




...{


SqlConnection conn=new SqlConnection("server=.;database=Test;uid=sa;pwd=sa");


int uid=int.Parse(Request.QueryString["id"].ToString());


SqlDataAdapter da=new SqlDataAdapter("select * from taobao where id="+uid+"",conn);


DataSet ds=new DataSet();


da.Fill(ds,"ddd");


Response.Write(ds.Tables[0].Rows[0][2].ToString());


Response.End();


}


catch(Exception )




...{




}




}