当鼠标悬停时，如何在网格视图中缩放照片

本文关键字：视图 网格 缩放 照片 悬停 鼠标 | 更新日期: 2023-09-27 18:12:23

我有一个gridview，它有一个缩略图大小的图片，这是好的，但如果用户将鼠标悬停在它上面，我想放大它。我试了很多方法，但都无济于事。

<asp:TemplateField HeaderText="Fard">
  <ItemTemplate>
    <img src='../SiteImages/<%# Eval("PropertyDetailsFardPath") %>'  width="100"  height="100"/>
  </ItemTemplate>
</asp:TemplateField>

当鼠标悬停时，如何在网格视图中缩放照片

试试，

首先从gridview中找到图像，然后使用jquery.mouseover和jquery.mouseleave函数。

<script language="javascript" type="text/javascript" >
    $().ready(function () {
        $("img").mouseover(function () { $(this).width(200); $(this).height(200) });
        $("img").mouseleave(function () { $(this).width(100); $(this).height(100) });
    })
</script>

上面的代码只会增加图像的高度和宽度。

如果你想应用data-zoom-image，那么你需要使用第三部分.Js插件。

插件参见Here和Here

相关文章：