jquery控制css絕對定位位置效果,例如鼠標移動到圖標顯示層顯示相關信息

[javascript] 
$(獲取到需要彈出浮動框的元素obj).hover(function () { 
    //鼠標移動時 
    //獲取到需要彈出浮動框的元素obj 
    pobj = document.getElementById(obj); 
    //獲取obj的位置,left及top,IE及FF3.0以上都支持 
    pobjleft = pobj.getBoundingClientRect().left; 
    pobjtop = pobj.getBoundingClientRect().top; 
    //為彈出的p的left,top賦值 
    pobjx = pobjleft + 0 /* 彈出的p距離obj左邊的距離,取實際值 */; 
    pobjy = pobjtop + 50 /* 彈出的p距離obj頂部的距離,取實際值 */; 
    // 定義彈出p 
    var x = "<p id='description' class='help' style='left:" + pobjx + "px; top:" + pobjy + "px;'>這裡是內容,也可以通過參數來傳遞</p>"; 
    //通過insertAdjacentHTML來寫入到html內(這個參數火狐不支持,但是可能通過兼容代碼 讓火狐兼容insertAdjacentHTML 屬性,兼容代碼不長,就幾十行) 
    document.body.insertAdjacentHTML("afterBegin", x); 
}, function () { 
    //鼠標移出時,通過closeDiv()移除這個p 
    closeDiv("description"); 
}) 
 
/* Sart 移除元素方法 */ 
function closeDiv(obj) { 
    var pobj = document.getElementById(obj); 
    pobj.parentNode.removeChild(pobj); 

/* End移除元素方法 */ 
 
/* Start 兼容代碼 讓火狐兼容insertAdjacentHTML 屬性 */ 
if (typeof HTMLElement != "undefined" && !HTMLElement.prototype.insertAdjacentElement) { 
    HTMLElement.prototype.insertAdjacentElement = function (where, parsedNode) { 
        switch (where) { 
            case "beforeBegin": 
                this.parentNode.insertBefore(parsedNode, this); 
                break; 
            case "afterBegin": 
                this.insertBefore(parsedNode, this.firstChild); 
                break; 
            case "beforeEnd": 
                this.appendChild(parsedNode); 
                break; 
            case "afterEnd": 
                if (this.nextSibling) { 
                    this.parentNode.insertBefore(parsedNode, this.nextSibling); 
                } else { 
                    this.parentNode.appendChild(parsedNode); 
                } 
                break; 
        } 
    }; 
    HTMLElement.prototype.insertAdjacentHTML = function (where, htmlStr) { 
        var r = this.ownerDocument.createRange(); 
        r.setStartBefore(this); 
        var parsedHTML = r.createContextualFragment(htmlStr); 
        this.insertAdjacentElement(where, parsedHTML); 
    }; 
    HTMLElement.prototype.insertAdjacentText = function (where, txtStr) { 
        var parsedText = document.createTextNode(txtStr); 
        this.insertAdjacentElement(where, parsedText); 
    }; 

/* End 兼容代碼 讓火狐兼容insertAdjacentHTML 屬性 */   

發佈留言