Javascript jQuery动态对齐
我有这个电话:Javascript jQuery动态对齐,javascript,jquery,css,plugins,Javascript,Jquery,Css,Plugins,我有这个电话: $(document).ready(function () { $("#back").DynamicallyCentering({ Alignment: "Vertical", Speed: 5 }); $(window).resize(function () { $("#back").DynamicallyCentering({ Alignment: "Vertical",
$(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”),这不适合我。然后我问:这是动态调整图层中心的正确方法吗 ==编辑=== 对不起,这个问题没有说清楚。为了更具体地回答我的问题,我提供了更多细节:
- 我有一个必要性:一个容器李>
提前感谢。这段代码看起来很好,对我来说也很好。如果您指的是重复调用插件两次的代码,您可以将其提取到另一个函数中:
var center = function() {
$("#back").DynamicallyCentering({
Alignment: "Vertical",
Speed: 5
});
}
center();
$(window).resize(center);
“这不适合我。”怎么不起作用?它在做什么,而不是你期望它做什么?哦,对不起,没有明确回答这个问题。所以,一切正常,但正如您在我的通话中看到的,我正在“重复”代码,我不知道这是否正确。有没有其他方法可以在不重复代码的情况下动态地将容器居中?我的意思是,用“OOP概念”的方式?为什么不通过css来实现呢?您可以使用
margin:0 auto代码>垂直居中有点棘手,但可以完成。谢谢你的回答,凯尔。不幸的是,我有动态宽度和高度,CSS不是我的解决方案(不幸的是再次)。哦,好吧!我已经试过了,但我对“代码缩短”的适用性感到困惑。非常感谢。