Question

我想从0开始尝试从头开始建立一个标尺，然后每隔5个附加一个div。 10个像素填充它的容器宽度。

我的小提琴展示了我一直在努力实现的一个例子。

这是一个HTML示例。

<div class='ruler'>
    <div class="tickLabel" style="left: 0px;">0</div>
    <div class="tickMinor" style="left: 5px;"></div>
    <div class="tickMajor" style="left: 10px;"></div>
    <div class="tickMinor" style="left: 15px;"></div>
    <div class="tickMajor" style="left: 20px;"></div>
    <div class="tickMinor" style="left: 25px;"></div>
    <div class="tickMajor" style="left: 30px;"></div>
    <div class="tickMinor" style="left: 35px;"></div>
    <div class="tickMajor" style="left: 40px;"></div>
    <div class="tickMinor" style="left: 45px;"></div>
    <div class="tickLabel" style="left: 50px;">50</div>
    and so on...
</div>

我一直在尝试使用window onload resize将它全部包装在一个函数中。我知道我想做什么，但我真的不明白如何使用JQuery来完成。

$(window).on('load resize', function() {
    $('.ruler').html("").append( ticks );
});

非常感谢任何帮助。

Answer 1

由于你想使用jQuery，你可以用一个.resize（）（https://api.jquery.com/resize/）函数来捕获所有窗口大小调整事件：

$(window).resize(function() {
    ....
});

要创建标尺，您可以使用带有开关的for循环（例如），基于当前标记（步骤）将为其添加特定类。要获得许多刻度/迭代，您可以使用.innerWidth（）（https://api.jquery.com/innerWidth/）函数检查容器的宽度，并将其除以5（5px是您的单个刻度线长度）。

创建标尺创建功能后，您可能会在两个地方调用它：在文档就绪块中，在页面准备好时创建并显示它，并在上面提到的窗口调整大小块内（因此标尺总是跨越容器的整个宽度）。

这是一个基于你的jsfiddle的例子： http://jsfiddle.net/7afPQ/2/

标尺每隔5个像素追加元素以填充其宽度

1 个答案: