时间戳

首页 > 解决方案 > 具有从右到左水平滚动的每月时间轴网格

javascript - 具有从右到左水平滚动的每月时间轴网格

问题描述

我想用 Js 在 Bootstrap 中制作一个水平时间轴轮播，我不知道从哪里开始。结构如下所示。请帮忙

在此处输入图像描述

我可以使用表格列或列表项来做到这一点。通过单击箭头键，列表从右向左滚动一个月。我没有在互联网上找到类似的代码。

<table width="100%" class="table table-responsive table-bordered">
  <tbody>
    <tr>
      <td width="20%" class=""><div class="stages ready" style="left: 0px;">
          <ul class="">
            <li data-stage-date="2018-07-01" class="ready" style="width: 480px; left: 0px;">
              <div class="interval"> <span class="title">July</span> </div>
              <div class="summary" data-open="0% of ₹0 " data-weighted-open="₹0" data-won="₹0" data-value="₹0" data-weighted-summary="₹0" data-percentage="0">
                <div class="icon"> <span class="plus" data-summary="₹0" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0">+</span>
                  <svg class="cui3-icon cui3-icon--s">
                    <use xlink:href="#icon-sm-weighted" href="#icon-sm-weighted"></use>
                  </svg>
                  <span class="number" data-summary="₹0" data-weighted-summary="" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0"></span> </div>
                <div class="totalSum"></div>
              </div>
            </li>
            <li data-stage-date="2018-08-01" class="ready" style="width: 480px; left: 480px;">
              <div class="interval"> <span class="title">August</span> </div>
              <div class="summary" data-open="100% of ₹10,000 " data-weighted-open="₹10,000" data-won="₹0" data-value="₹10,000" data-weighted-summary="₹10,000" data-percentage="100">
                <div class="icon"> <span class="plus" data-summary="₹10,000" data-weighted-open="₹10,000" data-open="100% of ₹10,000 " data-won="₹0">+</span>
                  <svg class="cui3-icon cui3-icon--s">
                    <use xlink:href="#icon-sm-weighted" href="#icon-sm-weighted"></use>
                  </svg>
                  <span class="number" data-summary="₹10,000" data-weighted-summary="" data-weighted-open="₹10,000" data-open="100% of ₹10,000 " data-won="₹0"></span> </div>
                <div class="totalSum"></div>
              </div>
            </li>
            <li data-stage-date="2018-09-01" class="ready" style="width: 480px; left: 960px;">
              <div class="interval"> <span class="title">September</span> </div>
              <div class="summary" data-open="0% of ₹0 " data-weighted-open="₹0" data-won="₹0" data-value="₹0" data-weighted-summary="₹0" data-percentage="0">
                <div class="icon"> <span class="plus" data-summary="₹0" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0">+</span>
                  <svg class="cui3-icon cui3-icon--s">
                    <use xlink:href="#icon-sm-weighted" href="#icon-sm-weighted"></use>
                  </svg>
                  <span class="number" data-summary="₹0" data-weighted-summary="" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0"></span> </div>
                <div class="totalSum"></div>
              </div>
            </li>
            <li data-stage-date="2018-10-01" class="ready" style="width: 480px; left: 1440px;">
              <div class="interval"> <span class="title">October</span> </div>
              <div class="summary" data-open="0% of ₹0 " data-weighted-open="₹0" data-won="₹0" data-value="₹0" data-weighted-summary="₹0" data-percentage="0">
                <div class="icon"> <span class="plus" data-summary="₹0" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0">+</span>
                  <svg class="cui3-icon cui3-icon--s">
                    <use xlink:href="#icon-sm-weighted" href="#icon-sm-weighted"></use>
                  </svg>
                  <span class="number" data-summary="₹0" data-weighted-summary="" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0"></span> </div>
                <div class="totalSum"></div>
              </div>
            </li>
            <li data-stage-date="2018-11-01" class="ready" style="width: 480px; left: 1920px;">
              <div class="interval"> <span class="title">November</span> </div>
              <div class="summary" data-open="0% of ₹0 " data-weighted-open="₹0" data-won="₹0" data-value="₹0" data-weighted-summary="₹0" data-percentage="0">
                <div class="icon"> <span class="plus" data-summary="₹0" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0">+</span>
                  <svg class="cui3-icon cui3-icon--s">
                    <use xlink:href="#icon-sm-weighted" href="#icon-sm-weighted"></use>
                  </svg>
                  <span class="number" data-summary="₹0" data-weighted-summary="" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0"></span> </div>
                <div class="totalSum"></div>
              </div>
            </li>
            <li data-stage-date="2018-06-01" class="ready" style="width: 480px; left: -480px;">
              <div class="interval"> <span class="title">June</span> </div>
              <div class="summary" data-open="0% of ₹0 " data-weighted-open="₹0" data-won="₹0" data-value="₹0" data-weighted-summary="₹0" data-percentage="0">
                <div class="icon"> <span class="plus" data-summary="₹0" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0">+</span>
                  <svg class="cui3-icon cui3-icon--s">
                    <use xlink:href="#icon-sm-weighted" href="#icon-sm-weighted"></use>
                  </svg>
                  <span class="number" data-summary="₹0" data-weighted-summary="" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0"></span> </div>
                <div class="totalSum"></div>
              </div>
            </li>
          </ul>
        </div></td>
    </tr>
  </tbody>
</table>

标签： javascriptcsstwitter-bootstrap

解决方案

我认为你可以这样做一些元素，但这次，我使用了 ul(list)。您可以使用 scrollLeft（jQuery 方法），因此您唯一的工作就是正确设置新位置。

$("scroll content(ul)").scrollLeft("100(new position)");

例如. 我希望这能帮到您。

更新
最后，我将向您展示一个示例。关联


你有SyntaxError: Unexpected token .，所以请先解决这个错误。只要 JavaScript 运行没有错误，我就可以调试。

  ul.animate({
      ul.scrollLeft(ul.scrollLeft() + targetMonth.position().left - 15);
  }, 200);

  ↓

  ul.animate({
      scrollLeft: ul.scrollLeft() + targetMonth.position().left - 15
  }, 200);

最后
，首先，添加一些样式和元素#date-list以确认正常工作。

/* ADDED */
#date-list {
    overflow-x: auto;
}

<ul id="date-list" class="d-flex">
    <li id="month-1" class="list-group-item">...</li>
    <li id="month-2" class="list-group-item">...</li>
    <li id="month-3" class="list-group-item">...</li>
    <li id="month-4" class="list-group-item">...</li>
    <li id="month-5" class="list-group-item">...</li>
    <li id="month-6" class="list-group-item">...</li>
    <!-- ADDED -->
    <li id="month-7" class="list-group-item">...</li>
    <li id="month-8" class="list-group-item">...</li>
</ul>

然后，在init进程中添加一个变量并修改一个逻辑。
（如果你应该在数量#date-list li不是 12 时正确处理）（但我假设你至少有八个项目，因为你有“今天”按钮。）

// ADDED in init process. 
var listCount = $("#date-list li").length;

// using it instead of hard cording.
 } else if (currentMonth === listCount) {

现在，您可以看到滚动条，让我们不要在您的 css 文件中添加一个类。
（如果您想查看您关注的列表项的突出显示位置。）

.list-group-item.active-month {
    color: #31708f;
    background-color: #d9edf7;
}

最后，如果您不想显示默认滚动条，我认为最好的简单方法是使用 webkit-scrollbar，但不幸的是，这不适用于 IE。

#date-list::-webkit-scrollbar {
    /* Of course, you can also change the scrollbar what it looks. */
    display: none;
}

如果您只需要使用 IE11 或 Egde，我推荐Perfect-scrollbar或至少其他插件，而不是自己实现。

如果你需要使用其他版本的IE，我帮不上忙。（我没有环境。）

这是使用.perfect-scrollbar

推荐阅读