JS随鼠标坐标移动，显示浮动层内容

在表单等项目中往往会遇到类似于“备注”、“说明”等100个字内的内容需要显示。

这些内容如果全部呈现开，会影响布局和美观，确又没有必要设计一个层或是一个页面。

那么，我们可以
把这些内容放到浮动层中，鼠标移入则显示，移出则隐藏，还会跟着鼠标移动：

效果：

HTML：

<div id="view" onmouseover="showDiv(1)" onmouseout="showDiv(0)" onmousemove="mouseMove(event)">查看</div>
<div id="area" style="display:none;">钓鱼岛是中国的</div>

JS：

<script language="javascript" type="text/javascript">
        function showDiv(open)
        {
            document.getElementById("area").style.display=open?"":"none";
        }

        function mouseMove(e)
        {
            var o = document.getElementById("area");
            o.style.left = mousePos(e).x-170;
            o.style.top = mousePos(e).y;
        }
        function mousePos(e)
        {
            var x,y;
            var e = e||window.event;
            return {
                x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
                y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop
            };
        };
</script>

CSS：

<style type="text/css">
    #view { text-align:center; cursor:default;}
    #area { position:absolute;width:150px;background:#eee;border:1px gray solid;padding:5px;text-align:left;}
</style>

需要注意的是，多条内容的显示，需要考虑ID的唯一性。

比如用GridView时，ItemTemplate内的ＩＤ可以这样写：

<asp:TemplateField>
　　<ItemTemplate>
　　　　<div id="view<%# Container.DataItemIndex+1%>" >VIEW</div>
　　</ItemTemplate>
</asp:TemplateField>

或者，用2个服务器控件，然后通过JS替换ID：

id2=id1.replace("view","area");

<asp:TemplateField>
　　<ItemTemplate>
　　　　<div id="view" runat="server">显示</div>
　　　　<div id="area" runat="server">内容</div>
　　</ItemTemplate>
</asp:TemplateField>