给DataList中列出的图片列表提供预览图片功能

平台：VS 2008 

实现效果：利用DataList绑定数据库中图片路径字段FileName，显示出图片的列表，点击其中任何一张图片，在浏览器中央位置显示图片原图，移开鼠标，原图关闭。

 

设计代码如下：

 

 <div style="position: relative; left: 0; top: 0"> <asp:datalist id="DataList3DInfo" runat="server" repeatcolumns="6" datakeyfield="ID" repeatdirection="Horizontal" onitemcommand="DataList3DInfo_ItemCommand" width="120px"> <ItemTemplate> <table width="120px" id="Table1"> <tr> <td colspan="2"> <asp:Image ID="Image1" runat="server" ImageUrl='<%#WebConfig.ResRoot +Eval("FileName").ToString()%>' Width="120px" Height="100px" onClick="LoadDiv(this.src, this)" OnMouseLeave="HideDiv()" Style="cursor: pointer" /> </td> </tr> <tr> <td align="center"> <asp:Button ID="btnDelete" runat="server" Style="margin-left: 0px" mce_Style="margin-left: 0px" Text="删除" CommandName="Delete" /> </td> </tr> </table> </ItemTemplate> </asp:datalist> <%--该div用于弹出预览图片--%> <div id="divImage" style="position: absolute; display: none;" mce_style="position: absolute; display: none;"> <%--<input type="button" value="关闭" onclick="HideDiv()" />--%> <img id="imgFull" alt="" src="" style="display: none;" mce_style="display: none;" /> </div></div>

预览功能利用JS实现，代码如下：

<mce:script type="text/javascript"><!-- // Detect if the browser is IE or not.// If it is not IE, we assume that the browser is NS.var IE = document.all?true:false// If NS -- that is, !IE -- then set up for mouse captureif (!IE) document.captureEvents(Event.MOUSEMOVE)// Set-up to use getMouseXY function onMouseMove//document.onmousemove = getMouseXY;// Temporary variables to hold mouse x-y pos.svar tempX = 0var tempY = 0 ////////////////////////////// var CurrentPage=1; function LoadDiv(url, lnk) { var img = new Image(); var imgDiv = document.getElementById("divImage"); var imgFull = document.getElementById("imgFull"); var dl = document.getElementById("<%=DataList3DInfo.ClientID%>"); var imgs = dl.getElementsByTagName("img"); CurrentPage = GetImageIndex(lnk.parentNode) + 1; img.src= url; img.onload = function() { imgFull.src = img.src; imgFull.style.display = "block"; }; document.onmousemove = function (e){ if (IE) { // grab the x-y pos.s if browser is IEtempX = event.clientX + document.body.scrollLefttempY = event.clientY + document.body.scrollTop} else { // grab the x-y pos.s if browser is NStempX = e.pageXtempY = e.pageY} var fullWidth = document.body.clientWidth; var fullHeight= document.body.clientHeight; //此处代码显示图层位置为浏览器中央imgDiv.style.left = document.body.scrollLeft+(fullWidth-302)/2+"px"; imgDiv.style.top = document.body.scrollTop+(fullHeight-202)/2+"px"; // catch possible negative values in NS4if (tempX < 0){tempX = 0}if (tempY < 0){tempY = 0} // show the position values in the form named Show// in the text fields named MouseX and MouseY//此处代码显示图层位置为鼠标旁边//imgDiv.style.left=tempX;//imgDiv.style.top=tempY;}; imgDiv.style.display="block"; return false; } function HideDiv(){ var imgDiv = document.getElementById("divImage"); var imgFull = document.getElementById("imgFull"); imgDiv.style.display="none"; imgFull.style.display="none"; } function GetImageIndex(obj){ while(obj.parentNode.tagName != "TD") obj=obj.parentNode; var td=obj.parentNode; var tr=td.parentNode; if(td.rowIndex%2==0) { return td.cellIndex+tr.rowIndex; } else { return td.cellIndex+(tr.rowIndex*2); }} // --></mce:script>

 

上面代码参考了外国一个ASP.NET技术论坛的文章，源地址忘记了。