ASP.NET C＃如何在懸停時放大GridView DataBound imageField圖片？

Question

我正在做學校工作並需要一些幫助，我希望將圖像放在“相關信息”ImageField列中，即在懸停時放大DataBound。 這是我的代碼：

    <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>

Answer 1

您必須編寫自定義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>

和CSS你將使用轉換的CSS3屬性在懸停時放大。

<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 Hover ASP Snippets上更改行顏色

只有一個boundfield有一些特定的CSS你可以試試這個。

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

這樣，Image的所有boundfield都將獲得懸停的CSS類。

希望這可以幫助。