Gridview中鼠标移动到项中的小图片后把图片放大

前端代码：

JS代码

1 function Test(aa)
2 {
3 document.getElementById( " img1 " ).src = " Image/ " + aa;
4 document.getElementById( " div1 " ).style.display = ' block ' ;
5 document.getElementById( " div1 " ).style.position = ' absolute ' ;
6 var x = event .clientX;
7 var y = event .clientY;
8 document.getElementById( " div1 " ).style.left = x;
9 document.getElementById( " div1 " ).style.top = y;
10 }
11 function Hide()
12 {
13 document.getElementById( " div1 " ).style.display = ' none ' ;
14 }

页面源码

1 < div id = " div1 " style = " display:none; " >
2 < img src = '' id = " img1 " width = " 150px " height = " 150px " />
3 </ div >
4 < div >
5 < asp:GridView ID = " GridView1 " runat = " server " AutoGenerateColumns = " false " >
6 < Columns >
7 < asp:TemplateField HeaderText = " 头像 " >
8 < ItemTemplate >
9 < img src = ' Image/<%#Eval("ImagePath") %> ' onmouseout = " Hide() " onmouseover = " Test('<%#Eval( " ImagePath " ) %>') " width = " 70px " height = " 80px " />
10 </ ItemTemplate >
11 </ asp:TemplateField >
12 < asp:BoundField DataField = " UserName " HeaderText = " 用户名 " />
13 < asp:BoundField DataField = " Age " HeaderText = " 年龄 " />
14 < asp:BoundField DataField = " Email " HeaderText = " 邮箱 " />
15 < asp:BoundField DataField = " Address " HeaderText = " 地址 " />
16 </ Columns >
17 </ asp:GridView >

后台代码：

后台代码

1 protected void Page_Load( object sender, EventArgs e)
2 {
3 if ( ! IsPostBack)
4 {
5 databind();
6 }
7 }
8 public void databind()
9 {
10 SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings[ " Conn " ].ToString());
11 SqlCommand cmd = new SqlCommand();
12 cmd.Connection = con;
13 cmd.CommandText = " Select * From T_Users " ;
14 SqlDataAdapter da = new SqlDataAdapter(cmd);
15 DataSet ds = new DataSet();
16 da.Fill(ds);
17 this .GridView1.DataSource = ds.Tables[ 0 ];
18 this .GridView1.DataKeyNames = new string [] { " id " };
19 this .GridView1.DataBind();
20 }