跟随鼠标的消息层

实现原理：后台动态生成提示信息层，在运行时加入到页面控件的鼠标事件中，激活页面的JS函数，将提示信息层加入页面中已存在的容器层中并显示，显示位置由鼠标位置计算得出。

 

页面内容：

<div id="divRight" style="top: 200px; left: 300px; display: none;"> <asp:Label ID="lblRight" runat="server" BackColor="#6699ff" Text=""></asp:Label> </div> <div id="divBottom" style="display: none; width: 300px; position: absolute; z-index: 10002;"> </div> <mce:script type="text/javascript" language="javascript"><!-- function ShowDiv(divname) { x = event.clientX + document.body.scrollLeft; y = event.clientY + document.body.scrollTop + 30; var div=document.getElementById("divBottom"); var divinner=document.getElementById(divname); div.style.display="block"; var bodywidth=document.body.offsetWidth; var bodyheight=document.body.offsetHeight; var left=x; var viewdivwidth=x+ parseInt(divinner.currentStyle.width.replace(/px/,"")); if(viewdivwidth>bodywidth) { left=x-(viewdivwidth-bodywidth); } div.style.left = left; div.style.top = y; divinner.style.display="block"; div.appendChild(divinner); } function HideDiv(divname) { var div=document.getElementById("divBottom"); div.style.display="none"; var divinner=document.getElementById(divname); divinner.style.display="none"; } // --></mce:script>

 

需加提示的控件：

<asp:DataList ID="dlList" runat="server" RepeatColumns="4" Width="100%" OnItemDataBound="dlList_ItemDataBound"> <ItemStyle HorizontalAlign="Center" Height="150px" /> <ItemTemplate> <asp:ImageButton ID="imgGw" runat="server" ImageUrl="/images/gangwei.png" /> <br /> <%#Eval("title") %> </ItemTemplate> </asp:DataList>

 

后台代码：（控件绑定时运行）

protected void dlList_ItemDataBound(object sender, DataListItemEventArgs e) { ImageButton img = (ImageButton)e.Item.FindControl("imgGw"); img.PostBackUrl = "jobdo.aspx?jobid=" + DataBinder.Eval(e.Item.DataItem, "id").ToString(); BLL.JobDoAPI.Blljob_do job = new BLL.JobDoAPI.Blljob_do(); BLL.JobDoAPI.Blljob_doOption jdo = new BLL.JobDoAPI.Blljob_doOption(); string tem = "<table width=100%>"; tem += "<tr><td style="color:White;background-color:#5D7B9D;font-weight:bold;" mce_style="color:White;background-color:#5D7B9D;font-weight:bold;">权限列表</td></tr></table>"; tem += "<table width=100%><tr>"; DataTable dt = job.GetData((int)DataBinder.Eval(e.Item.DataItem, "id")); if (dt.Rows.Count > 0) { for (int i = 0; i < dt.Rows.Count; i++) { if ((i % 6 == 0) & i != 0) { tem += "</tr><tr>"; } int doid = (int)dt.Rows[i][0]; jdo.GetDataById(doid); tem += "<td>" + jdo.title + "</td>"; } } else { tem += "<td align=center>暂无数据</td>"; } tem += "</tr></table>"; tem = "<div id=divRight" + e.Item.ItemIndex.ToString() + " style='width:500px;background-color:#6699ff;' class=divcontent>" + tem + "</div>"; lblRight.Text += tem; img.Attributes.Add("onmousemove", "ShowDiv('divRight" + e.Item.ItemIndex.ToString() + "')"); img.Attributes.Add("onmouseout", "HideDiv('divRight" + e.Item.ItemIndex.ToString() + "');"); }