js 悬浮框 光标位置 页面滚动后的光标位置

想要写一个悬浮框，当划过某个区域的时候，这个悬浮框显示，光标在哪，悬浮框就在哪。

思路是：定义一个DIV，初始化时使之display: none，在光标划过指定位置时，将此DIV设置为display: block。使用onmouseover事件和onmouseout事件。

 

1.定义DIV

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

其中onmouseover和onmouseout是我们需要用的事件，绑定对应的js方法。

2.悬浮框的显示和隐藏 js方法

悬浮框内显示的内容我已赋在hidShowDetail内。

//Display checked CheckBoxList number
        function showDetail() {
            var displayStr = document.getElementById("hidShowDetail").value;
            var pointPosition = getCursorPosition(window.event);//get point relative position
            document.getElementById("TotalSelectDIV").style.display = "block";
            document.getElementById("TotalSelectDIV").style.left = pointPosition[0] + "px";
            document.getElementById("TotalSelectDIV").style.top = pointPosition[1] + "px";
            document.getElementById("TotalSelectNum").innerText = displayStr;

        }

        //Hide checked CheckBoxList number
        function hideDetail() {
            document.getElementById("TotalSelectNum").innerText = "";
            document.getElementById("TotalSelectDIV").style.display = "none";
        }

其中getCursorPosition方法是为了获取当前光标位置，以前是用window.event.clientX + "px"和 window.event.clientY + "px"来表示光标的坐标，但因为页面滚动，获取的位置不对。后来查到了一个，不管页面如何滚动，都可以获取到实际光标的位置getCursorPosition方法。参考：https://blog.csdn.net/liangshui999/article/details/95059015

function getCursorPosition(event) {
            var position = [0, 0];
            var scrollingPosition = getScrollingPosition();
            if (typeof event == "undefined") {
                event = window.event;
            }
            if (typeof event.pageX != 'undefined') {
                position = [event.pageX, event.pageY];
            } else {
                position = [event.clientX + scrollingPosition[0], event.clientY + scrollingPosition[1]];
            }
            return position;
        }

        function getScrollingPosition() {
            var position = [0, 0];
            if (typeof window.pageXOffset != 'undefined') {
                position = [window.pageXOffset, window.pageYOffset];
            } else if (typeof document.documentElement.scrollTop != 'undefined' &&
                (document.documentElement.scrollTop > 0 || document.documentElement.scrollLeft > 0)) {
                position = [document.documentElement.scrollLeft, document.documentElement.scrollTop];
            } else if (typeof document.body.scrollLeft != 'undefined') {
                position = [document.body.scrollLeft, document.body.scrollTop];
            }
            return position;
        }