jQuery探測位置的提示彈跳窗(toolTip box)詳細解析_jquery

這裡我用jQuery做了個提示彈跳窗的js，做了個小demo，簡單總結下：

方位

依目前滑鼠所處的位置不同，箭頭所指向的方向也不同：

左上方（left-top）（缺省）、左下方（left-bottom）、右上方（right-top）、右下方（right-bottom）、上左方（top-left）、上右方（top-right）、下左方（bottom-left）、下右方（bottom-right）

優先權

以上各種狀況優先依序降低

探測思路

探測基本思路是:

首先，也是前提條件，判斷容器的高或寬是否是彈跳窗對應的高或寬的兩倍，之所以是兩倍，因為臨界點是目標容器的各個邊的中點

/*
* 先判斷目標容器的高度或寬度是否為容器對應高度或寬度與箭頭尺寸總和的兩倍，否則，報錯。之所以是2倍，因為臨界點是目標容器的各個邊的中點。
*/

接下來，可以依據優先權去逐一判斷：

/*
* 想法是，先偵測左側，再偵測右側，左右都放不下，則偵測頂部，都排除，再考慮底部。偵測左右側時，先考慮頂部能否放下；偵測上下時，先考慮據左右側那邊的距離大。

* 1.偵測左側時，判斷上下距離能否放下箭頭偏移量,有一個不能放下（例如top），則為['top', 'left']，右側一樣

* 2.偵測上下時，判斷左右距離能否放下箭頭偏移量（缺省為上,即top），有一邊不能放下，即為滑鼠偏向的一邊（若left

* 缺省是左側，頂部。
*/

具體情況判斷：

•依優先級，先判斷滑鼠右側能否放下彈跳窗:

◦能放下，則去判斷能否再放進個箭頭

■若能放下

■則判斷頂部是否能放下個箭頭，包括箭頭的偏移量，若能

■判斷頂部能放下箭頭包括偏移量且不會超過目標容器高度，則為left-top

■否則如果頂部大於彈窗高度，並底部可放下箭頭包括其偏移量，則為left-bottom

■否則，判斷底部能放下箭頭和彈窗，則為top-left

■否則，基於我們的前提條件，是bottom-left

■若不能放下，判斷底部能不能放下彈窗和箭頭

■能，則為top-left

■否則，為bottom-left

◦不能放下，則left考慮完，換right，同樣的思路

八種情況彈跳窗的狀況與位置

舉例top-left

複製程式碼 程式碼如下:

程式碼如下:



程式碼如下： case 'top-left' :
    // top 加上箭頭尺寸
    this.conObj.css('top', top tarTop);
  arrOffset ) {
        // 緊貼左邊
        this.conObj.css('left', taroo );       // 如果right,撐不下自身在右邊的距離（conWidth - arrOffset）,則left值減小，箭頭跟隨滑鼠，使自己右邊與容器對齊
        // 正常顯示的left, 減去右側仍需要的寬度((conWidth - arrOff // 正常顯示的left, 減去右側還需要的寬度((conWidth - arrOffset ) - right ), left - arrOffset - ((conWidth - arrOffset) - right ),得出tarWidth - conWidth
        // 換個思路，緊貼右邊，即左邊距離為，目標容器寬度減去自身寬度
        this.conObj.css('left', tarWidth - conWidth tarLeft);
    } else {      this.conObj.css('left', left - arrOffset tarLeft);
    }

    break;

八種情況下箭頭的狀況與位置

同樣以top-left為例

複製程式碼

程式碼如下:

 case 'top-left' :
    this.arrowObj.prependTo(this.conObj);
    // 中緊貼右邊,此時，箭頭隨滑鼠移動
    //con conLeft === 0 && (conWidth > (right arrOffset))) {
        this.arrowObj.css('left', conWidth - right - arrowPos);
    } else {
        this.arrowObj.css ('left', arrowPos);
    }
    break;

最後說下寫程式碼時候的些許感悟：

寫的程式碼，在重構了N遍，寫完N行註解後，忽然想到，其實不論是寫程式碼，還是生活，我們都是有個既定的或是約定俗成的前提或說規範的。而一旦這個規範被打破，往往前功盡棄，即使不是，往往也很受傷。實例小至代碼、大至社會，無一例外