用JavaScript實作類別似於ToolTip的懸浮框

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

在使用ASP.NET的時候，有時候需要滑鼠移至上方在頁面的某各位置的時候，或者說懸停在某個控制項上的時候需要

出現一個懸浮框。這個懸浮框可以是對此控制項內容的詳細說明，或者一些其他的資訊。比如在頁面中可能有一個表

格，表格中的一項叫“考核標準”，那麼可能你需要當滑鼠移到“考核標準”對應的儲存格的時候，需要出現一個

對“考核標準”詳細說明的懸浮框。

你可能馬上會想到ToolTip屬性，的確ToolTip屬性可以實現這種效果，但是ToolTip屬性有一個缺點，它的顯示

時間有限制。過了一定的時間，ToolTip會自動消失，只有將滑鼠重新移到指定的控制項上，ToolTip才可以再次顯

現。這樣如果您說明的內容比較多的話，顯然ToolTip是不能滿足您的需求的。

這裡，CSDN在結貼打分的時候給了一個很好的解決方案。在結貼給分的時候，當您將您的滑鼠移到給分的文

本框的時候，會出現一個小的黃色矩形，裡面分別顯示了問題的總分和剩餘可分配的分數。如果您不將滑鼠移開文

本框，那麼這個懸浮框將不會消失。這正是我們需要的。

從對應網頁的原始碼可以看到上面效果的具體實現，代碼摘抄如下，這裡主要關注是懸浮框的定位問題，在代

碼的注釋中都已經體現了。這裡需要明確的一個概念是這裡需要將和其中的控制項就是一個個的容器，大容器中可以

放置小容器，頁面最進階別的容器是Document。而TableCell的父容器是Table。想知道一個控制項的父容器是什麼

可以通過obj.offsetParent.TagName屬性來得到：

//onmouseover 事件觸發的函數
function cc(e, message)
...{
       cen.innerText = message;
       var ttop = e.offsetTop;                     //這裡得到指定控制項離父容器控制項頂部的距離 px
       var tleft= e.offsetLeft;                   //這裡得到指定控制項離父容器控制項左邊的距離 px
       var h = e.clientHeight;                  //這裡得到指定控制項的高度
       var w = e.clientWidth;                  //這裡得到指定控制項的寬度
       var originalE = 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 事件觸發的函數
function out()...{cen.style.display = "none";}

懸浮框是用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

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.
Note In 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
<HTML><HEAD><TITLE>Elements: Positions</TITLE><SCRIPT LANGUAGE="JScript">function showPosition(){var oElement = document.all.oCell;alert("The TD element is at (" + oElement.offsetLeft +"," + oElement.offsetTop + ")/n" + "The offset parent is "+ oElement.offsetParent.tagName );}</SCRIPT></HEAD><BODY onload="showPosition()"><P>This document contains a right-aligned table.<TABLE BORDER=1 ALIGN=right><TR><TD ID=oCell>This is a small table.</TD></TR></TABLE></BODY></HTML>

Standards Information

There is no public standard that applies to this property.

Applies To

SUB

Platform Version

Win16: 4.0

Win32: 4.0

Windows CE: 4.0

Unix: 4.0

Mac: 4.0

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, 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
<HTML><HEAD><SCRIPT>function isinView(oObject){var oParent = oObject.offsetParent;var iOffsetTop = oObject.offsetTop;var iClientHeight = oParent.clientHeight;if (iOffsetTop > iClientHeight) {alert("Special Text not in view. Expand Window to put Text in View.");}else{alert("Special Text in View!");}}</SCRIPT></HEAD><BODY onload="window.resizeTo(430,250)" onclick="isinView(oID_1)"  SCROLL=NO><DIV STYLE="position:absolute;left:20px">Click anywhere in window to see if special text is inview.</DIV><DIV id="oID_1" STYLE="position:absolute; left:50px;top:300px;width:280px;color:lightGreen;font-size:large;font-weight:bold;background-color:hotPink;font-family:Arial">Here's some special text</DIV></BODY></HTML>
Show Me
Standards Information

There is no public standard that applies to this property.

Applies To

[ Object Name ]

Platform Version

Win16:

Win32:

Windows CE:

Unix:

Mac:

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

HTML	N/A
Scripting	[ iCoord = ] object.offsetTop

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More