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

Question

我有一个gridview，它有一个缩略图大小的图片，没关系，但如果用户将鼠标悬停在它上面，我想放大它。我尝试了很多方法，但没有任何帮助。

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

Answer 1

试试，

首先从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