想要寫一個懸浮框，當劃過某個區域的時候，這個懸浮框顯示，游標在哪，懸浮框就在哪。

思路是：定義一個DIV，初始化時使之display: none，在游標劃過指定位置時，將此DIV設定為display: block。使用onmouseover事件和onmouseout事件。

1.定義DIV

1 <div id="operationDiv"  onmouseover="showDetail();" onmouseout="hideDetail();">
2      <asp:CheckBoxList ID="cblComments" runat="server" OnSelectedIndexChanged="
 
cblComments_SelectedIndexChanged" AutoPostBack="true">
3           <asp:ListItem Text="Agree" Value="Agree" onclick="CheckCBLSimpleSelect(this)"></asp:ListItem>
4           <asp:ListItem Text="Disagree" Value="Disagree" onclick="CheckCBLSimpleSelect(this)"></asp:ListItem>
5      </asp:CheckBoxList>
6
 
 </div>

其中onmouseover和onmouseout是我們需要用的事件，繫結對應的js方法。

2.懸浮框的顯示和隱藏 js方法

懸浮框內顯示的內容我已賦在hidShowDetail內。

 1 //Display checked CheckBoxList number
 2         function showDetail() {
 3             var displayStr = document.getElementById("hidShowDetail").value;
 4             var pointPosition = getCursorPosition(window.event
 
);//get point relative position
 5             document.getElementById("TotalSelectDIV").style.display = "block";
 6             document.getElementById("TotalSelectDIV").style.left = pointPosition[0] + "px";
 7             document.getElementById("TotalSelectDIV").style.top = pointPosition[1] + "px";
 8             document.getElementById("TotalSelectNum").innerText = displayStr;
 9 
10         }
11 
12         //Hide checked CheckBoxList number
13         function hideDetail() {
14             document.getElementById("TotalSelectNum").innerText = "";
15             document.getElementById("TotalSelectDIV").style.display = "none";
16         }

其中getCursorPosition方法是為了獲取當前游標位置，以前是用window.event.clientX + "px"和 window.event.clientY + "px"來表示游標的座標，但因為頁面滾動，獲取的位置不對。後來查到了一個，不管頁面如何滾動，都可以獲取到實際游標的位置getCursorPosition方法。參考：https://blog.csdn.net/liangshui999/article/details/95059015

 1 function getCursorPosition(event) {
 2             var position = [0, 0];
 3             var scrollingPosition = getScrollingPosition();
 4             if (typeof event == "undefined") {
 5                 event = window.event;
 6             }
 7             if (typeof event.pageX != 'undefined') {
 8                 position = [event.pageX, event.pageY];
 9             } else {
10                 position = [event.clientX + scrollingPosition[0], event.clientY + scrollingPosition[1]];
11             }
12             return position;
13         }
14 
15         function getScrollingPosition() {
16             var position = [0, 0];
17             if (typeof window.pageXOffset != 'undefined') {
18                 position = [window.pageXOffset, window.pageYOffset];
19             } else if (typeof document.documentElement.scrollTop != 'undefined' &&
20                 (document.documentElement.scrollTop > 0 || document.documentElement.scrollLeft > 0)) {
21                 position = [document.documentElement.scrollLeft, document.documentElement.scrollTop];
22             } else if (typeof document.body.scrollLeft != 'undefined') {
23                 position = [document.body.scrollLeft, document.body.scrollTop];
24             }
25             return position;
26         }