Question

我正在寻找一个响应式定位库，可以轻松地将许多元素放在HTML幻灯片上的不同位置。有时元素需要水平或垂直对齐，通常对齐需要相对于另一个元素，

有时候我希望对齐方式可以说是面板左边30px或者面板底线25％。

我需要更多，然后只需垂直居中，我们需要灵活定位多个项目，以便它们相对于父元素或兄弟元素保持成比例，并且它在响应容器内部工作，以便可以在移动设备上查看手机或桌面

我的一位团队成员编写了一些代码，用于在响应式幻灯片中定位各种元素，幻灯片适用于不同的设备。

function CalculatePosition(slide) {
    var body = $(slide).find('.bodySection');
    var playBtn = $(slide).find('.playButton');
    var skipBtn = $(slide).find('.skipButton');
    var videoContainer = $(slide).find('.video-container');
    var ytPlayer = $(slide).find('#ytplayer');
    var middle = $(slide).find('.middle');
    if (playBtn.length>0)
        $(playBtn).css({ marginTop: ($(body).height() - $(playBtn).height()) / 2 + "px", marginLeft: "-" + $(playBtn).width() / 2 + "px" });
    if (videoContainer > 0)
        $(videoContainer).css({ marginTop: ($(window).height() - $(ytPlayer).height()) / 2 + "px" });
    if (skipBtn > 0)
        $(skipBtn).css({ top: $(ytPlayer).height() / 2 + "px", marginTop: "-" + $(skipBtn).height() / 2 + "px" });
    if (middle > 0)
        $(middle).css({ paddingTop: ($(body).height() - $(middle).height()) / 2 + "px" });
}

我到处寻找一个可以让它更清洁的图书馆？

我会对一个像这样的轻量级库感兴趣。

 $(playBtn).verticalCenterTo($(body));
// or
$(body).verticalCenter($(playBtn));

或使用属性表示法实现相同功能的库

<div class='bodySection'>
   <span class='playButton' align-relative-to='bodySection' align-type='vertical-center' />
   <span class='stopButton' align-relative-to='playButton' align-position='right 20px' />
</div>

Answer 1

如果您只需要垂直定位，为什么不使用仅限CSS的解决方案，例如display：table-cell技术在这里描述：http://www.vanseodesign.com/blog/demo/vertical-centering/table-cell.php

如果您需要以不同的父母为中心，您可以使用班次切换来获得所需的效果。这比使用JS计算它要快得多。

不确定这是否能满足您的一切需求。如果我误解了你的问题，请发表评论。

轻量级Javascript响应式定位库

1 个答案: