如何使用JavaScript实现类似于ToolTip的悬浮框？
在使用ASP.NET的时候，有时候需要鼠标悬停在页面的某各位置的时候，或者说悬停在某个控件上的时候需要
出现一个悬浮框。这个悬浮框可以是对此控件内容的详细说明，或者一些其他的信息。比如在页面中可能有一个表
格，表格中的一项叫“考核标准”，那么可能你需要当鼠标移到“考核标准”对应的单元格的时候，需要出现一个
对“考核标准”详细说明的悬浮框。
你可能马上会想到ToolTip属性，的确ToolTip属性可以实现这种效果，但是ToolTip属性有一个缺点，它的显示
时间有限制。过了一定的时间，ToolTip会自动消失，只有将鼠标重新移到指定的控件上，ToolTip才可以再次显
现。这样如果您说明的内容比较多的话，显然ToolTip是不能满足您的需求的。
这里，CSDN在结贴打分的时候给了一个很好的解决方案。在结贴给分的时候，当您将您的鼠标移到给分的文
本框的时候，会出现一个小的黄色矩形，里面分别显示了问题的总分和剩余可分配的分数。如果您不将鼠标移开文
本框，那么这个悬浮框将不会消失。这正是我们需要的。
从对应网页的源代码可以看到上面效果的具体实现，代码摘抄如下，这里主要关注是悬浮框的定位问题，在代
码的注释中都已经体现了。这里需要明确的一个概念是这里需要将和其中的控件就是一个个的容器，大容器中可以
放置小容器，页面最高级别的容器是Document。而TableCell的父容器是Table。想知道一个控件的父容器是什么
可以通过obj.offsetParent.TagName属性来得到：
//onmouseover事件触发的函数functioncc(e,message)
{
cen.innerText=message;varttop=e.offsetTop;//这里得到指定控件离父容器控件顶部的距离pxvartleft=e.offsetLeft;//这里得到指定控件离父容器控件左边的距离pxvarh=e.clientHeight;//这里得到指定控件的高度varw=e.clientWidth;//这里得到指定控件的宽度varoriginalE=e;//这里通过e=e.offsetParent操作，一直将e变成document对象，既最高级别的容器；//这里ttop和tleft就得到了指定控件距离网页顶部和左部的距离；
while(e=e.offsetParent){ttop+=e.offsetTop;tleft+=e.offsetLeft;}cen.style.display="";//层显示cen.style.top=ttop+h;cen.style.left=tleft+w-cen.clientWidth;//上面的代码都是将悬浮层调整到指定控件的正下方
}//onmouseout事件触发的函数functionout(){cen.style.display="none";}悬浮框是用DIV实现的，对应代码如下，可以根据需要调整大孝背景：
<divid="pop"style="DISPLAY:none;FONT-SIZE:13px;Z-INDEX:99;BACKGROUND:#ffff00;WIDTH:200px;POSITION:absolute"></div>以下是JavaScript代码中遇到的一些对象的官方解释，这里也列举如下：
－－－－－－－－－－－－－－－－－－－－offsetParent 属性 －－－－－－－－－－－－－－－－－－－－－－
offsetParent Property |
Internet Development Index |
Retrieves a reference to the container object that defines the offsetTop and offsetLeft properties of the object.
Syntax
HTML N/A Scripting [ oElement = ] object.offsetParent
Possible Values
oElement Object that receives the container object. The property is read-only. The property has no default value.
Remarks
Most of the time the offsetParent property returns the body object.
NoteIn Microsoft® Internet Explorer 5, the offsetParent property returns the table object for the td object; in Internet Explorer 4.0 it returns the tr object. You can use the parentElement property to retrieve the immediate container of the table cell.
Example
This example shows how to determine the position of a td object. Although the td object appears to the far right in the document, its position is close to the x-axis and y-axis, because its offset parent is a table object rather than the document body. For Internet Explorer 4.0, this same example returns a position of 0,0 because the offset parent is the table row.
SHOWExample
Standards Information
There is no public standard that applies to this property.
Applies To
SUB Platform Version Win16: 4.0 Win32: 4.0 WindowsCE: 4.0 Unix: 4.0 Mac: 4.0 A, ACRONYM, ADDRESS, APPLET, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, COMMENT, CUSTOM, DD, DEL, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, FRAME, hn, HR, I, IFRAME, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=hidden, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NOBR, OBJECT, OL, OPTION, P, PLAINTEXT, PRE, Q, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP Move the mouse pointer over an element in the Applies To list to display availability information for the listed platforms.
See Also
Measuring Element Dimension and Location
－－－－－－－－－－－－－－－－－－offsetTop 属性 －－－－－－－－－－－－－－－－－－
Retrieves the calculated top position of the object relative to the layout or coordinate parent, as specified by the offsetParent property.
Syntax
HTML N/A Scripting [ iCoord = ] object.offsetTop Possible Values
iCoord Integer that receives the top position, in pixels. The property is read-only. The property has no default value.
Remarks
You can determine the location, width, and height of an object by using a combination of the offsetLeft, offsetTop, offsetHeight, and offsetWidth properties. These numeric properties specify the physical coordinates and dimensions of the object relative to the object's offset parent.
For more information about how to access the dimension and location of objects on the page through the Dynamic HTML (DHTML)燚ocument Object Model (DOM), see Measuring Element Dimension and Location.
Example
This example uses the offsetTop property to determine whether an object is in the user's view.
SHOWExample
Standards Information
There is no public standard that applies to this property.
Applies To
[ Object Name ] Platform Version Version data is listed when the mouse hovers over a link, or the link has focus. A, ACRONYM, ADDRESS, APPLET, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, CUSTOM, DD, DEL, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, FRAME, hn, HR, I, IFRAME, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NOBR, OBJECT, OL, OPTION, P, PLAINTEXT, PRE, Q, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TextRange, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP Move the mouse pointer over an element in the Applies To list to display availability information for the listed platforms. See Also
boundingHeight, boundingLeft, boundingTop, boundingWidth
本文地址：http://www.45fan.com/a/question/68249.html