ASP.NET C#如何在悬停时放大GridView DataBound imageField图片

本文关键字：GridView 放大 DataBound imageField 图片 悬停 NET ASP | 更新日期: 2023-09-27 17:59:07

我正在做功课，需要一些帮助，我希望在悬停时放大DataBound的"相关信息"ImageField列中的图像。这是我的代码：

    <div style="height:200px; width: 610px; overflow: auto;">
                <asp:GridView ID="GV_insView" runat="server"
            AutoGenerateColumns="False"
            CssClass="Grid" AlternatingRowStyle-CssClass="alt" Width="511px">
<AlternatingRowStyle CssClass="alt"></AlternatingRowStyle>
            <Columns>
                <asp:BoundField HeaderText="Customer ID" DataField="NRIC" />
                <asp:BoundField HeaderText="Insurance Type" DataField="insType" />
                <asp:BoundField HeaderText="Date Filed" DataField="dateFiled" DataFormatString="{0:dd/MM/yyyy}"/>
            <asp:ImageField HeaderText="Relevant Information" DataImageUrlField="relInfo" ControlStyle-Width="100" ControlStyle-Height="100"> 
              </asp:ImageField>
            </Columns>
        </asp:gridview>
                    </div>

ASP.NET C#如何在悬停时放大GridView DataBound imageField图片

您必须编写自定义的JavaScript函数和CSS来支持这一点。

请找到下面的示例代码来了解如何做到这一点。

<script type="text/javascript">
    $(function () {
        $("[id*=GridView1] td").hover(function () {
            $("td", $(this).closest("tr")).addClass("hover_row");
        },function(){
            $("td", $(this).closest("tr")).removeClass("hover_row");
        });
    });
</script>

以及你将使用变换缩放的CSS3属性在悬停时放大的CSS。

<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
    td
    {
    }
    .hover_row
    {
        -ms-transform: scale(2, 3); /* IE 9 */
        -webkit-transform: scale(2, 3); /* Safari */
         transform: scale(2, 3);
    }
</style>

要获得完整的解决方案，您可以查看此链接，它是上述信息的来源。更改GridView悬停ASP代码段上的行颜色

如果只有一个边界字段有一些特定的CSS，你可以试试这个。

<asp:BoundField DataField="Count" HeaderText="Count">
    <ItemStyle CssClass="yourclass"></ItemStyle>
</asp:BoundField>

这样，Image的所有边界字段都将获得悬停的CSS类。

希望这能有所帮助。

相关文章：