1

我有这个电话：

$(document).ready(function () {
    $("#back").DynamicallyCentering({
        Alignment: "Vertical",
        Speed: 5
    });
    $(window).resize(function () {
        $("#back").DynamicallyCentering({
            Alignment: "Vertical",
            Speed: 5
        });
    });
});

动态居中插件：

jQuery.fn.DynamicallyCentering = function(Options) {
    var Block = $(this);
    var Defaults = {
        Alignment: "Both",
        Speed: 0
    };
    var Options = $.extend(Defaults, Options);
    var FormatedAlignment = Defaults.Alignment.toLowerCase();
    var VerticalFormula = ($(window).height() / 2) - (Block.height() / 2);
    var HorizontalFormula = ($(window).width() - Block.width()) / 2 + $(window).scrollLeft();
    StaticPositioning = function() {
        var PositioningSource;
        if (FormatedAlignment == "vertical") {
            var PositioningSource = Block.css("margin-top", VerticalFormula);
        } else if (FormatedAlignment == "horizontal") {
            var PositioningSource = Block.css("margin-left", HorizontalFormula);
        } else {
            var PositioningSource =
            Block.css("margin", VerticalFormula + "px " + HorizontalFormula + "px");
        }
        return PositioningSource;
    }
    StaticPositioning();
};​

如您所见，我有一个小插件试图动态地居中一个图层（在本例中为“#back”），这不适合我。然后我问：这是动态居中我的图层的正确方法吗？

=== 编辑 ===

对不起，没有明确的问题。为了更具体地说明我的问题，我带来了更多细节：

  • 我有一个必要：动态地居中一个容器；

我可以用 jQuery 做到这一点。我的代码之前在同一个线程中发布过，他工作正常。但我不知道我是否以正确的方式这样做。大家能理解我吗？正如您在我的代码调用中看到的那样，我正在重复代码，这对我来说看起来不对。

任何人都知道是否有更好的方法使用 OOP 概念来做到这一点？

提前致谢。

4

1 回答 1

0

这段代码对我来说看起来和工作正常。如果您指的是两次调用插件的重复代码，您可以将其提取到另一个函数中：

var center = function() {
    $("#back").DynamicallyCentering({
            Alignment: "Vertical",
            Speed: 5
        });
}

center();
$(window).resize(center);
于 2012-06-25T20:03:21.327 回答