* 2.檢測上下時，判斷左右距離能否放下箭頭偏移量（缺省為上,即top），有一側(cè)不能放下，即為鼠標(biāo)偏向的一側(cè)（若left<right，則left），則為['top', 'left']，此時箭頭偏移量為0，隨鼠標(biāo)移動,鼠標(biāo)left增大，則增大，最大至偏移量。

* 缺省是左側(cè)，頂部。
*/

具體情況判斷：

•根據(jù)優(yōu)先級，先判斷鼠標(biāo)右側(cè)能否放下彈窗:

◦能放下，則去判斷能否再放進(jìn)個箭頭

■若能放下

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

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

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

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

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

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

■能，則為top-left

■否則，為bottom-left

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

八種情況彈窗的情況和位置

舉例top-left

復(fù)制代碼代碼如下:

 case 'top-left' :
    // top 加上 箭頭尺寸
    this.conObj.css('top', top + tarTop);
    // 判斷l(xiāng)eft距離
    if ( left < arrOffset ) {
        // 緊貼左邊
        this.conObj.css('left', tarLeft);
    } else if (right < (conWidth - arrOffset)) {             // 如果right,撐不下自身在右邊的距離（conWidth - arrOffset）,則left值減小，箭頭跟隨鼠標(biāo)，使自己右邊與容器對齊
        // 正常顯示的left, 減去右側(cè)還需要的寬度((conWidth - arrOffset) - right ), left - arrOffset - ((conWidth - arrOffset) - right ),得出tarWidth - conWidth
        // 換種思路，緊貼右邊，即左邊距離為，目標(biāo)容器寬度減去自身寬度
        this.conObj.css('left', tarWidth - conWidth + tarLeft);
    } else {                // 正常顯示的left
        this.conObj.css('left', left - arrOffset + tarLeft);
    }
    break; 

八種情況下箭頭的情況和位置

同樣以top-left為例

復(fù)制代碼代碼如下:

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

最后說下在寫代碼時候的些許感悟：

寫的代碼，在重構(gòu)了N遍，寫完N行注釋后，忽然想到，其實不論是寫代碼，還是生活，我們都是有個既定的或者約定俗成的前提或者說規(guī)范的。而一旦這個規(guī)范被打破，往往前功盡棄，即使不是，往往也很受傷。實例小至代碼、大至社會，無一例外

您可能感興趣的文章: