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

最新推荐文章于 2024-06-12 18:18:00 发布

于是改成了于是乎

最新推荐文章于 2024-06-12 18:18:00 发布

阅读量2.5k

点赞数

分类专栏： .net C# js

本文链接：https://blog.csdn.net/yushiww/article/details/43969653

版权

.net C# js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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

<ItemTemplate>
<table>
<tr>
<td rowspan="3">
<a οnmοuseοver="GetShowImg('<%# DataBinder.Eval(Container.DataItem, "ImageURL")%>')"
οnmοuseοut="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";
}