文章类型: JAVASCRIPT
关键词: javascript,JS,浮动层,div,各种浏览器,弹出,一个,相对位置,css,层,绝对位置,相对位置,IE,360浏览器,火狐浏览器,Firefox,google浏览器,Chrome浏览器,sougou浏览器,搜,狗浏览器,qq浏览器
内容摘要: 适用于各种浏览器的JS弹出一个相对位置的浮动层,需求:点击一个按钮之后在按钮下方显示一个浮出层。各种IE、360浏览器、火狐浏览器、Firefox、google浏览器、Chrome浏览器、sougou浏览器、搜狗浏览器、qq浏览器等

适用于各种主流浏览器的JS弹出一个相对位置的浮动层

2015/7/20 17:37:30    来源:apple    阅读:

适用于各种浏览器的JS弹出一个相对位置的浮动层,需求:点击一个按钮之后在按钮下方显示一个浮出层。各种IE、360浏览器、火狐浏览器、Firefox、google浏览器、Chrome浏览器、sougou浏览器、搜狗浏览器、qq浏览器等


需求:点击一个按钮之后在按钮下方显示一个浮出层。

function getElementPos(elementId) {
    var ua = navigator.userAgent.toLowerCase();
    var isOpera = (ua.indexOf('opera') != -1);
    var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof     
    var el = document.getElementById(elementId);
    if (el.parentNode === null || el.style.display == 'none') {
        return false;
    }
    var parent = null;
    var pos = [];
    var box;
    if (el.getBoundingClientRect) //IE     
    {
        box = el.getBoundingClientRect();
        var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
        var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
        return {
            x: box.left + scrollLeft,
            y: box.top + scrollTop
        };
    }
    else if (document.getBoxObjectFor) // gecko         
    {
        box = document.getBoxObjectFor(el);
        var borderLeft = (el.style.borderLeftWidth) ? parseInt(el.style.borderLeftWidth) : 0;
        var borderTop = (el.style.borderTopWidth) ? parseInt(el.style.borderTopWidth) : 0;
        pos = [box.x - borderLeft, box.y - borderTop];
    }
    else // safari & opera         
    {
        pos = [el.offsetLeft, el.offsetTop];
        parent = el.offsetParent;
        if (parent != el) {
            while (parent) {
                pos[0] += parent.offsetLeft;
                pos[1] += parent.offsetTop;
                parent = parent.offsetParent;
            }
        }
        if (ua.indexOf('opera') != -1 || (ua.indexOf('safari') != -1 && el.style.position == 'absolute')) {
            pos[0] -= document.body.offsetLeft;
            pos[1] -= document.body.offsetTop;
        }
    }

    if (el.parentNode) {
        parent = el.parentNode;
    }
    else {
        parent = null;
    }
    while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { // account for any scrolled  

        ancestors
        pos[0] -= parent.scrollLeft;
        pos[1] -= parent.scrollTop;
        if (parent.parentNode) {
            parent = parent.parentNode;
        }
        else {
            parent = null;
        }
    }
    return {
        x: pos[0],
        y: pos[1]
    };
}

function showLayer(obj, divId) {//obj指相对位置的Id,divId显示层的Id
    pos = getElementPos(obj);
    l = document.getElementById(divId);

    l.style.left = pos.x + 220 + "px";
    l.style.top = pos.y + "px";
    l.style.display = "block";
}


↑ 上一篇文章:网站优化 关键词:网站优化,SEO,seo,信息技术,网络技术,网络推广,.. 发布日期:2015/7/20 17:34:57
↓ 下一篇文章:Winform中ListView鼠标移动使用ToolTip动态显示信息 关键词:C#,Winform,ListView,鼠标移动,Too.. 发布日期:2015/7/21 16:05:15
相关文章:
全面兼容ie[6-11]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览 关键词:全面,兼容,ie,火狐,Chrome,opera,maxthon3,360浏览器,js,Java.. 发布日期:2015-07-14 16:45
C# 弹出消息框后跳转另一页面 关键词:C#,弹出,消息框,跳转,另一页面,Response,Write,js,javascript,C.. 发布日期:2015-07-29 14:42
如何在IE地址栏用自己的HTML网页favicon.ico图标 关键词:favicon.ico,HTML,IE,网页,搜狗浏览器,360浏览器,自己的页面图标 发布日期:2015-07-07 17:50
相关目录:.NETJAVAJAVASCRIPTHTMLANDROID
我要评论
正在加载评论信息......