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

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

高洛峰
发布: 2016-11-24 09:35:02
原创
1186 人浏览过

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

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板