欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery探測(cè)位置的提示彈窗(toolTip box)詳細(xì)解析

 更新時(shí)間：2013年11月14日 09:28:59   作者：  
提示彈窗（toolTip box）經(jīng)常會(huì)被用到，但是本文總要的不是彈，也不是窗，而是探測(cè)位置，在適當(dāng)?shù)牡胤綇棿?。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助

這里我用jQuery做了個(gè)提示彈窗的js，并做了個(gè)小demo，簡(jiǎn)單總結(jié)下：

方位

根據(jù)當(dāng)前鼠標(biāo)所處的位置不同，箭頭所指向的方向也不同：

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


優(yōu)先級(jí)

以上各種情況優(yōu)先級(jí)依次降低

探測(cè)思路

探測(cè)基本思路是:

首先，也是前提條件，判斷容器的高或?qū)捠欠袷菑棿皩?duì)應(yīng)的高或?qū)挼膬杀叮允莾杀?，因?yàn)榕R界點(diǎn)是目標(biāo)容器的各個(gè)邊的中點(diǎn)

/*
* 先判斷目標(biāo)容器的高度或者寬度是否是容器對(duì)應(yīng)高度或?qū)挾扰c箭頭尺寸之和的兩倍，否則，報(bào)錯(cuò)。之所以是2倍，因?yàn)榕R界點(diǎn)是目標(biāo)容器的各個(gè)邊的中點(diǎn)。
*/

接下來(lái)，可以依據(jù)優(yōu)先級(jí)去逐個(gè)判斷：

/*
* 思路是，先檢測(cè)左側(cè)，再檢測(cè)右側(cè)，左右都放不下，則檢測(cè)頂部，都排除，再考慮底部。檢測(cè)左右側(cè)時(shí)，先考慮頂部能否放下；檢測(cè)上下時(shí)，先考慮據(jù)左右側(cè)那邊的距離大。

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

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

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

具體情況判斷：

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

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

■若能放下

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

■判斷頂部能放下箭頭包括偏移量并且不會(huì)超過(guò)目標(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)，使自己右邊與容器對(duì)齊
        // 正常顯示的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緊貼右邊,此時(shí)，箭頭隨鼠標(biāo)移動(dòng)
    if (conLeft === 0 && (conWidth > (right + arrOffset))) {
        this.arrowObj.css('left', conWidth - right - arrowPos);
    } else {
        this.arrowObj.css('left', arrowPos);
    }
    break;

最后說(shuō)下在寫(xiě)代碼時(shí)候的些許感悟：

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

相關(guān)文章

最新評(píng)論