javascript - 想要内联列表左右消失

Question

我正在为一个新元素制作原型(prototype)，我希望在该元素中像内联列表一样显示日历。 到目前为止没什么大不了的，但有点棘手的部分是我希望它在窗口调整大小时显示更少的日期并且仍然将当前日期放在窗口的中心..

我的代码在这里，只是让右侧消失(见图片)，.content 的 overflow: hidden 和 ul 的 white-space: nowrap 发挥了作用。但还是。不是我要找的。黄色的当前框应该居中……拖着我的头发然后用手掌捂脸

Javascript 很不错，但如果您有一个 css 解决方案，那就更好了。 :)

这里也有一支笔.. http://codepen.io/PatJarl/pen/eLJyr

.m-racecards {

    .content {

        padding: 5%; 
        max-width: 80%;
        margin: 0 auto;      
        overflow: hidden; 
        text-align: center; 

        ul {
            white-space: nowrap; 

            li {
                font-size: 25px; 
                display: inline-table;
                padding: 10px; 
            }
        }

        .current {
            background: $proto-yellow; 
        }
    } 
}

html 非常简单...

<div class="m-racecards">
 <div class="content">
    <ul>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li class="current">18</li>
      <li>19</li>
      <li>and so on.... </li>
  </ul>
</div>

Answer 1

你可以像这样使用一点 jQuery 来实现它:)

$('.current').each(function() {
  var leftCur = $(this).position().left,
    ulwrapHalfWidth = $('.ulwrap').width() / 2,
    elHalfWidth = $(this).outerWidth() / 2;


  $(this).parent().css({
    left: (ulwrapHalfWidth - leftCur - elHalfWidth)
  });

});

$('.ulwrap ul').on('click', 'li', function() {
  $('.ulwrap ul li').removeClass('current');

  $(this).addClass('current');

  var leftCur = $(this).position().left,
    ulwrapHalfWidth = $('.ulwrap').width() / 2,
    elHalfWidth = $(this).outerWidth() / 2;


  $(this).parent().animate({
    left: (ulwrapHalfWidth - leftCur - elHalfWidth)
  }, 300);
});

.content {
    background: red;
    position: relative;
    padding: 5%;
    max-width: 50%;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
}
.ulwrap {
    overflow: hidden;
    width: 100%;
}
ul {
    white-space: nowrap;
    position: relative;
}
li {
    font-size: 25px;
    display: inline-table;
    padding: 10px;
    cursor: pointer;
}
.current {
    background: yellow;
}

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


<div class="m-racecards">
  <div class="content">
    <div class="ulwrap">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li class="current">18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>and so on....</li>
      </ul>
    </div>
  </div>
</div>