4

我的目标是在一个 div 中水平居中显示几张图像，该 div 在包装器中也水平居中。我可以这样做，但是当我在图像上调用 jQuery 的“反弹”效果时，它们会左对齐。

我已经摆弄了很长时间，无法让它们在弹跳时保持居中。

在http://jsfiddle.net/vX3gz/2上查看

我在 Win7 上使用最新的 Firefox。

4

2 回答 2

3

图像向左“跳跃”的原因是因为反弹添加了几个div具有内联样式的元素，设置为margin: 0.

因此，一个相当简单的解决方法是在您自己的 CSS 中覆盖它：

#thin > div {
    margin: 0 auto !important;   
}

注意我通常反对使用!important，但由于您使用它来覆盖内联样式，我认为它是可以接受的。

工作示例：http: //jsfiddle.net/vX3gz/33/

于 2012-07-18T12:26:18.350 回答
2

我想我已经解决了。不是我喜欢的方式（使用 CSS），也许有点矫枉过正，但它仍然有效。问题确实是左边距，在处理要居中的可变内容时，您真的不想设置它。另外：我注意到 Safari（适用于 Windows）也有同样的问题。

看到它在这里工作：http: //jsfiddle.net/c_kick/tuu4Q/

所以我所做的是编写一个自定义的 BounceMe() 函数，将要反弹的元素传递给该函数。它能做什么：

  1. 检查我们是否在 Firefox 或 Safari 中，如果不是：定期退回（跳过以下步骤）
  2. 获取元素的当前（实际）左偏移
  3. 将该偏移量作为左边距应用到元素
  4. 反弹它
  5. 将左边距重置为自动

此外，它在元素上设置了一个“弹跳”标志，以防止函数弹跳已经弹跳的东西。

重要的是所有元素都应该得到

position: relative;

否则偏移计算将关闭。

jQuery：

var userAgent = navigator.userAgent.toLowerCase();
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());//to prevent Chrome from being detected as safari  

function BounceMe($this) {
    if($.browser.mozilla || $.browser.safari && !$.browser.chrome){
        if (!$this.data('bouncing')) {
            $this.each(function(){ //run on each img
                $pos = $(this).position(); // get position of image
                $(this).css({marginLeft: $pos.left}); //'hard' set the margin left
            });

            $this.data('bouncing', true).effect("bounce", function(){
                $this.css({marginLeft: 'auto'}) //reset the margin left after animation
                    .data('bouncing', false);
            });
        } else {
            //images are still animating, do nothing
        }
    } else {
        //no Firefox or Safari? No problem, do a regular bounce.
        $this.stop().effect("bounce");
    }
}

$(document).ready(function() {

    BounceMe($("img")); //bounce on pageload

    $("#bounce").click(function() {
        BounceMe($("img")); //bounce on click on link
    });
});

您可以将函数重写为 .extend()，这样它就可以像常规的 Bounce() 一样被链接。

于 2012-07-18T11:56:36.920 回答