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

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

高洛峰
Libérer: 2016-11-24 09:35:02
original
1186 Les gens l'ont consulté

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal