代码:http://jsfiddle.net/LPF85/6/

在FF,IE7和IE9(我测试过的唯一不运行WebKit的浏览器)中,似乎left属性始终设置为0,或者在IE情况下设置为负。

我的定位代码全部基于文档的尺寸。

function open_img_in_face_box(id, width){
    max_width = $j(document).width();
    max_height = $j(document).height();
    padding = 150;

    passed_width = width || (max_width - (2 * padding));

    var img = $j('#' + id);
    dom_img = document.getElementById(id);

    $j(document).bind('reveal.facebox', function() {
        $j("#facebox .image img").width(passed_width);
    })
    // display
    jQuery.facebox({
        image: img.attr('src')
    });

    // center and adjust size
    var aspect_ratio = img.width() / img.height();
    var img_width = passed_width;
    var img_height = passed_width / aspect_ratio;

    window_center_y = max_height / 2;
    window_center_x = max_width / 2;

    offset_y = window_center_y - (img_height / 2);
    offset_x = window_center_x - (img_width / 2);

    var fbx = $j('#facebox');
    fbx.css('position', 'absolute');
    fbx.css('left', offset_x + 'px !important');
    fbx.css('top', offset_y + 'px !important');
    fbx.css('margin-left', 'auto');
    fbx.css('margin-right', 'auto');

}


margin-leftmargin-right在这里似乎什么也没做,我很好,因为左数学应该在所有浏览器上都可以,对吗? (这只是数学)

面盒/灯箱的目标是水平和垂直居中。

最佳答案

您为什么还要以编程方式首先计算位置?如果用户调整页面大小怎么办?这可以在纯CSS中轻松完成。

我不太了解您的jsFiddle(或者我看不到相同的东西吗?),所以我只给您提供以下脚本:http://jsfiddle.net/minitech/8U4Ke/可以随意更改。有评论。 ;)

现在,隐藏和显示很容易-隐藏,淡出.overlay。要显示,请淡入。要更改内容,请替换.popup中的HTML。添加关闭框,然后随意添加。

关于javascript - 通过偏移量算术居中在非Webkit浏览器中不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/6947976/

10-12 12:54
查看更多