Question

我正在尝试构建一个可缩放的时间轴，并在“时间轴”旁边添加均匀间隔的标记，以便用户可以在管理面板中添加其他时间。

例如，如果有4个标记，无论宽度如何，它们都会自动分割时间轴的1/4。

所以喜欢这个＆lt; - | - | - | - | - ＆gt;

以下是代码：

<style>

    body {
        background: black;
    }
#timeline {
    width:49.5%;
    background: url(http://brendonwells.co.uk/CPD/ice-training/img/timeline.png) center center no-repeat;
    background-size: 100%;
    height: 30px;
    position: relative;
}

.checkpoint {
    position: absolute;
    width: 1px;
    height: 13px;
    top: 13px;
    margin-left: auto;
    margin-right: auto;
    background: white;
    cursor: pointer;
}

.checkpoint:hover {
    background: white;
}

.checkpoint p {
    position: absolute;
    height: 30px;
    width:0;
    bottom: -35px!important;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    transition: 0.4s;
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    -moz-transition: 0.4s;
    -webkit-transition: 0.4s;
}

.checkpoint:hover p {
    opacity: 1;
}

</style>

<div id="timeline">
                        <div class="checkpoint" >
                            <div class="rel">
                                <p>5 Minutes</p>
                            </div>
                        </div>

                        <div class="checkpoint" >
                            <p>10 Minutes</p>
                        </div>

                        <div class="checkpoint" >
                            <p>15 Minutes</p>
                        </div>

                        <div class="checkpoint" >
                            <p>20 Minutes</p>
                        </div>

                        <div class="checkpoint" >
                            <p>25 Minutes</p>
                        </div>

                        <div class="checkpoint" >
                            <p>30 Minutes</p>
                        </div>

                        <div class="checkpoint" >
                            <p>35 Minutes</p>
                        </div>
                    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

        <script>


        //Set slide times
        var time1 = 300;
        var time2 = 600;
        var time3 = 900;
        var time4 = 1200;
        var time5 = 1500;
        var time6 = 1800;
        var time7 = 2100;

        //Array to keep all the times
        var times = [time1, time2, time3, time4, time5, time6, time7];

        //variable to iterate through all of them
        var chosenTime = 0;

        //placement needs multiplier
        var multiplier = 1;

        function deliverTimes() {
            $('.checkpoint').each(function() {
                $(this).data("time", times[chosenTime]);
                //console.log("The data is " +  $(this).data('time'));
                chosenTime++;
                //console.log('running');
                placement($(this));
            });
        }

        //Call the function
        deliverTimes();

        //Clicking checkpoints
        $('.checkpoint').click(function() {
            video.currentTime = $(this).data("time");
        });

        //place the checkpoints

        function placement($div) {
            var width = $('#timeline').width();

            var margin = ((width/$('.checkpoint').length) - 10) * multiplier;
            console.log(margin);
            $div.css("left", margin + "px");
            multiplier++;
        }
                </script>

http://brendonwells.co.uk/timeline.html

我还准备了一个链接，以便CSS可以搞乱等等。

由于

Answer 1

您可以使用CSS3 flexbox来实现所需的外观以处理间距和宽度。在html中添加和删除检查点，css将处理其余的。不需要JS。

HTML

<div id="timeline">
    <div class="checkpoint">
        <div class="rel">
            <p>5 Minutes</p>
        </div>
    </div>

    <div class="checkpoint" >
        <p>10 Minutes</p>
    </div>

    <div class="checkpoint" >
        <p>15 Minutes</p>
    </div>

    <div class="checkpoint" >
        <p>20 Minutes</p>
    </div>

    <div class="checkpoint" >
        <p>25 Minutes</p>
    </div>

    <div class="checkpoint" >
        <p>30 Minutes</p>
    </div>

    <div class="checkpoint" >
        <p>35 Minutes</p>
    </div>
</div>

CSS

body {
  background: #000;
}

#timeline {
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  color: #fff;
  height: 30px;
  display: flex;
  position: relative;
}
#timeline::after {
  content: "";
  position: absolute;
  width: 100%;
  border-top: 1px dashed #fff;
  top: 50%;
  left: 0;
}
#timeline .checkpoint {
  flex: 1;
  position: relative;
  height: 50%;
  margin-top: 15px;
  border-right: 1px solid #fff;
}
#timeline .checkpoint:last-child {
  border-right: none;
}
#timeline .checkpoint p {
  width: 0;
  margin: 0;
  cursor: pointer;
  opacity: 0;
  transition: all .3s ease;
}
#timeline .checkpoint p:hover {
  opacity: 1;
}

https://jsfiddle.net/s5rL5eja/

Answer 2

您可以在此Responsivegrid.css使用此系统来均匀分隔它们，否则，您可以使用将每个检查点的宽度设置为100％的百分比的函数。因此，如果您有5个检查点，每个检查点/子项的宽度可能为19％，边距为总宽度的1％，那么您只需给checkpoint:first-child或checkpoint:last-child一个边距为0％（我不确定你的每个检查点都有哪个类，但你只需用任何类替换checkpoint）

TLDR：根据js函数为每个检查点提供整个宽度的百分比。使第一个或最后一个检查点的边距为0％。

甚至沿时间轴的html元素间距

2 个答案: