1

我正在使用 jQuery 开发一个动态 html 弹出窗口（一个绝对定位的 div），它会自动在屏幕上居中。它还可以容纳适合或超过窗口屏幕尺寸的内容。

这个想法是我们的​​客户点击我们产品列表旁边的“阅读更多”链接，然后这个弹出窗口出现并显示其销售信。每封销售信函还包含一个进一步描述产品的视频。

弹出窗口将保持在屏幕中央，直到通过单击窗口中的关闭按钮或单击窗口外部将其关闭。它通过根据用户滚动的位置以及是否调整窗口大小来调整其绝对位置来保持在中心。

我的问题在于视频元素。在除 Firefox（所有事物）之外的所有其他浏览器中，当用户滚动文档或调整视频大小时，视频会在弹出窗口中完美呈现。但是，在 Firefox 中，当用户滚动/调整大小并且弹出窗口调整其绝对位置时，视频看起来像是从原来的位置弄脏到现在的位置，或者视频屏幕变得透明。

我想也许需要做的是强制 Firefox 重新绘制视频屏幕。我尝试了几种不同的方法来实现这一点。简单地让元素消失并快速重新出现似乎并不能完成这项工作。但是，如果我快速来回调整它的边距或位置，它似乎可以工作。

起初，我打算采用这个解决方案。但是，当我开始在其他浏览器上测试它时，这种“摆动”动作似乎会减慢浏览器的速度，特别是我在 Chrome 中注意到它（我还没有在其他浏览器上测试过）。

我考虑过将此修复限制为 Firefox，但 jQuery 中的浏览器数据字段在 1.3 中已弃用。我总是可以自己制作 javascript 来识别浏览器，但我想知道是否有更好的方法来强制浏览器重绘视频元素。或者也许我走错了路，不需要重新绘制。

我正在使用 FireFox 3.0.1、Chrome 1.0.154.48、Internet Explorer 7 和 Safari 3。

任何输入将不胜感激:) 这是 wiggleVids 函数的代码：

**更新：我更改了代码，以便嵌入元素仅在弹出框的位置发生变化时摆动，而不是将其绑定到窗口滚动功能。这加快了 chrome 的执行速度，但它还没有完成。它仍然是一个明显的滞后。

**更新 2：根据 Lee 的建议，我更改了代码，以便将弹出窗口中的嵌入视频存储在一个数组中。这样，当这个函数被执行时，浏览器就不必一次又一次地在 DOM 中搜索嵌入的对象。myVids 在弹出窗口关闭时被全局声明和清除。

function wiggleVids3() {
    if ( myVids.length <= 0 ) {
        $('#popup embed').each( function(ctr) { myVids[ctr] = $(this); } );
    }

    if ( myVids.length > 0 ) {
        for( var ctr = 0; ctr < myVids.length; ctr++ ) {
            var myObj = myVids[ctr];
            var temp = myObj.css("margin-top");
            var suffix =  temp.substr( temp.length - 2,temp.length );
            var currentMargin =  ( ( suffix == 'px' ) || ( suffix == 'em' ) ) ? parseInt( temp.substr( 0, temp.length - 2 ) ) : parseInt( temp );
            var newMargin = currentMargin + 2;
            myObj.css('margin-top', newMargin + 'px');
            setTimeout( function(){ myObj.css('margin-top', currentMargin ); }, 1 );
        }
    }
}
4

2 回答 2

1

基于@Adam 所说的，

将策略模式与工厂模式结合使用来创建具有类似界面的对象以生成 HTML，然后您可以为每个行为不同的浏览器创建一个。

哦，工厂完成所有的浏览器检测......以及设置您的对象。

这个问题与我的回答有关：

于 2009-03-19T18:20:04.693 回答
0

即使 jquery 不支持它，我认为您最好为每个浏览器使用不同的代码，或者仅在检测到 firefox 浏览器时“启用”特殊的 firefox 代码。似乎它可以用很少的工作解决你的问题。

-亚当

于 2009-03-19T18:15:17.513 回答