Rumah > php教程 > PHP开发 > jquery控制css绝对定位位置效果,例如鼠标移动到图标显示层显示相关信息

jquery控制css绝对定位位置效果,例如鼠标移动到图标显示层显示相关信息

高洛峰
Lepaskan: 2016-11-24 09:35:02
asal
1186 orang telah melayarinya

[javascript] 
$(获取到需要弹出浮动框的元素obj).hover(function () { 
    //鼠标移动时 
    //获取到需要弹出浮动框的元素obj 
    divobj = document.getElementById(obj); 
    //获取obj的位置,left及top,IE及FF3.0以上都支持 
    divobjleft = divobj.getBoundingClientRect().left; 
    divobjtop = divobj.getBoundingClientRect().top; 
    //为弹出的div的left,top赋值 
    divobjx = divobjleft + 0 /* 弹出的div距离obj左边的距离,取实际值 */; 
    divobjy = divobjtop + 50 /* 弹出的div距离obj顶部的距离,取实际值 */; 
    // 定义弹出div 
    var x = "

这里是内容,也可以通过参数来传递
"; 
    //通过insertAdjacentHTML来写入到html内(这个参数火狐不支持,但是可能通过兼容代码 让火狐兼容insertAdjacentHTML 属性,兼容代码不长,就几十行) 
    document.body.insertAdjacentHTML("afterBegin", x); 
}, function () { 
    //鼠标移出时,通过closeDiv()移除这个div 
    closeDiv("description"); 
}) 
 
/* Sart 移除元素方法 */ 
function closeDiv(obj) { 
    var divobj = document.getElementById(obj); 
    divobj.parentNode.removeChild(divobj); 

/* 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 属性 */  

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Cadangan popular
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan