通过鼠标悬停从gridview缩放图像 [英] zoom image from gridview by mouseover

问题描述

我在gridview中显示图像我想要缩放图像并在指针转到该图像时在中心打开。我怎么能这样做？

I am displaying images in gridview i want to zoom image and open in center when pointer goes to on that image. How can i do this?

推荐答案

这个解决方案将让你在鼠标指针悬停在GridView上时缩放GridView中的图像。



Step-1 ：添加GridView&根据您的要求对其进行数据绑定。将Gridview的AutoGenerateColumns属性更改为False。

我希望您知道如何使用模板在GridView中显示数据。

所以现在在项目模板下添加一个图像控件如下：

This solution will provide you zooming of the image present in GridView whenever mouse pointer hovers over it.

Step-1: Add GridView & Databinding for it according to your requirement.Change "AutoGenerateColumns" property of Gridview to False.
I hope you know how to use Templates to Show data in GridView.
So now add an Image control under Item Template as following:

<asp:TemplateField HeaderText="Employee Image">
  <ItemTemplate>
    <asp:Image ID="gvImg" runat="server" ImageUrl="~/Images/1.jpg" CssClass="default" />
  </ItemTemplate>
</asp:TemplateField>

我使用了CSS类，我在下面提供了&图片仅供演示。您可以根据自己的要求使用它们。



步骤2 ：在页面中写下以下jQuery代码在Head部分：

I''ve used a CSS Class, which I''ve provided below & an Image just for demo.You can use them according to your requirement.

Step-2: Write the following jQuery code in your page under Head section:

<style>
  .default 
   {
     width: 75px;
     height: 75px;
   }
</style>

<script src="Scripts/jquery-1.8.3.js"></script>
<script>

（ document ）。ready（ function （）{
// 此处使用默认CSS类捕获悬停事件

(document).ready(function () { //Using default CSS Class here for capturing the hover event

（' .default'）。each（ function （）{

('.default').each(function () {

这篇关于通过鼠标悬停从gridview缩放图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！