跟随鼠标的消息层

实现原理：后台动态生成提示信息层，在运行时加入到页面控件的鼠标事件中，激活页面的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() + "');");


        }