2

我目前正在尝试调整我一直在研究的图像滑块。我要做的是在用户调整浏览器大小时保持滑块与浏览器左侧相遇的相同位置。检查下面的示例

            +------------------------+
            |          body          |
+--------------------------------------------------+
|           |                                      |
|           |<- Keep this aligned at the same      |
|           |    position on browser resize?       |
|           |                                      |
|           |                                      |
|           |                                      |
+--------------------------------------------------+
            |                        |
            +------------------------+


HTML:
<div id="scrollerWrapper">
    <div id="imageScroller">
        <img class="i" href="..." />
        <img class="i" href="..." />
        <img class="i" href="..." />
        <img class="i" href="..." />
    </div>
</div>

    browserHeight = parseInt($(window).height(), 10);

    galleryMargin = browserHeight * 0.025;
    imageHeight = browserHeight - 80 - (galleryMargin * 2);
    if (imageHeight < 250) {
        imageHeight = 250;
    }
    $(".i").css("height", imageHeight + "px");
4

1 回答 1

0

也许您可以更详细地了解您的问题，我从您解释的内容中了解到的内容看起来像这样并且不需要任何 javascript

小提琴在这里http://jsfiddle.net/caramba/LzwUP/

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* { padding:0px; margin:0px; }
</style>
</head>
<body>
    <div style="position:absolute;width:100%;height:400px;background-color:orange;">
        <div style="position:relative;left:0px;top:100px;width:500px;height:200px;background-color:navy;"></div>
    </div>
</body>
</html>
于 2013-02-26T21:03:26.413 回答