C# .net 简单的点击小图显示大图。

来源：互联网发布：知乎2018校园招聘编辑：程序博客网时间：2024/05/21 12:43

GridView 中绑定了服务器上存放图片的路径。

<asp:TemplateField HeaderStyle-Width="90%" HeaderText="图片信息">

<ItemTemplate>
<table>
<tr>
<td rowspan="3">
<a onmouseover="GetShowImg('<%# DataBinder.Eval(Container.DataItem, "ImageURL")%>')"
onmouseout="HIddiv()">
<img style="width: 80px; height: 80px" alt="" src="<%# DataBinder.Eval(Container.DataItem, "ImageURL") %>"
border="0"></a>
</td>
<td>
名称: <asp:Label ID="AttachName" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "fileAttachName") %>'></asp:Label><br />
上传时间: <asp:Label ID="CreateDate" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "createDate") %>'></asp:Label><br />
标签类型: <asp:Label ID="Label1" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "liblabel") %>'></asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" />

</asp:TemplateField>

GridView 外面定义一个div 用来显示图片

当鼠标移进图片后显示图片，onmouseover函数 GetShowImg（图片地址）

function GetShowImg(imgfile)
{
document.all("ShowImage").src =imgfile;
document.getElementById("ShowImage").style.display="block";
var x = window.event.clientX;
var y = window.event.clientY+document.body.scrollTop; //因为有滚动条加上网页被卷去的高
var divFly = document.getElementById("divFly");
divFly.style.left = x+50;
divFly.style.top = y-150;
}

隐藏div：

function HIddiv( )
{
document.all("ShowImage").src ="";
document.getElementById("ShowImage").style.display="none";
}

0 0