文章详情

  • 游戏榜单
  • 软件榜单
关闭导航
热搜榜
热门下载
热门标签
php爱好者> php文档>Gridview中鼠标移动到项中的小图片后把图片放大

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

时间:2011-02-25  来源:hfliyi

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 }
相关阅读 更多 +
排行榜 更多 +
辰域智控app

辰域智控app

系统工具 下载
网医联盟app

网医联盟app

运动健身 下载
汇丰汇选App

汇丰汇选App

金融理财 下载