中心李水平與內溢出的div：汽車

Question

我創建像一個時間表，我有以下的代碼至今：

 $("#time-line-selector ul li a").click(function(event) { 
 

 
      event.preventDefault(); 
 

 
      $("#time-line-selector ul li a").removeClass("active"); 
 

 
      $(this).addClass("active"); 
 

 
      var yearId = $(this).attr("data-id-selector"); 
 

 
      $("#time-line-container ul").animate({ 
 
       "margin-left": - ((yearId - 1) * timeLineContentWidth) 
 
      }, 1000); 
 
     });

#time-line-selector{ 
 
    width: 100%; 
 
    margin: 30px 0 0 0; 
 
    overflow: auto; 
 
} 
 
#time-line-selector ul{ 
 
    margin: 0 auto; 
 
    padding: 0; 
 
} 
 
#time-line-selector ul li{ 
 
    float: left; 
 
    margin: 0; 
 
    list-style: none; 
 
    position: relative; 
 
} 
 
#time-line-selector ul li a{ 
 
    display: block; 
 
    position: relative; 
 
    background: #ffffff; 
 
    margin: 8px 0 0 0; 
 
    padding: 16px 10px 8px 10px; 
 
    color: #aeaeae; 
 
    font-size: 17px; 
 
    text-decoration: none; 
 
    -webkit-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 
#time-line-selector ul li a:before{ 
 
    display: block; 
 
    content: ""; 
 
    position: absolute; 
 
    background: #e1e1e1; 
 
    top: 0; 
 
    left: 0; 
 
    margin: 0px 0 0 0px; 
 
    width: 100%; 
 
    height: 1px; 
 
    border-radius: 50%; 
 
} 
 
#time-line-selector ul li a:after{ 
 
    display: block; 
 
    content: ""; 
 
    position: absolute; 
 
    background: #aeaeae; 
 
    top: 0; 
 
    left: 50%; 
 
    margin: -5px 0 0 -5px; 
 
    width: 10px; 
 
    height: 10px; 
 
    border-radius: 50%; 
 
} 
 
#time-line-selector ul li a:hover, #time-line-selector ul li a.active{ 
 
    background: #595959; 
 
    color: #ffffff; 
 
} 
 
#time-line-selector ul li a:hover:after, #time-line-selector ul li a.active:after{ 
 
    background: #e62b28; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="time-line-selector"> 
 
      <ul style="width: 1054px;"><li class="time-line-selector"><a href="#" data-id-selector="1" data-year-selector="1935">1935</a></li><li class="time-line-selector"><a href="#" data-id-selector="2" data-year-selector="1946">1946</a></li><li class="time-line-selector"><a href="#" data-id-selector="3" data-year-selector="1995">1995</a></li><li class="time-line-selector"><a href="#" data-id-selector="4" data-year-selector="1996">1996</a></li><li class="time-line-selector"><a href="#" data-id-selector="5" data-year-selector="1997">1997</a></li><li class="time-line-selector"><a href="#" data-id-selector="6" data-year-selector="1998">1998</a></li><li class="time-line-selector"><a href="#" data-id-selector="7" data-year-selector="1999">1999</a></li><li class="time-line-selector"><a href="#" data-id-selector="8" data-year-selector="1935">1935</a></li><li class="time-line-selector"><a href="#" data-id-selector="9" data-year-selector="1946">1946</a></li><li class="time-line-selector"><a href="#" data-id-selector="10" data-year-selector="1995">1995</a></li><li class="time-line-selector"><a href="#" data-id-selector="11" data-year-selector="1996">1996</a></li><li class="time-line-selector"><a href="#" data-id-selector="12" data-year-selector="1997">1997</a></li><li class="time-line-selector"><a href="#" data-id-selector="13" data-year-selector="1998">1998</a></li><li class="time-line-selector"><a href="#" data-id-selector="14" data-year-selector="1999">1999</a></li><li class="time-line-selector"><a href="#" data-id-selector="15" data-year-selector="1935">1935</a></li><li class="time-line-selector"><a href="#" data-id-selector="16" data-year-selector="1946">1946</a></li><li class="time-line-selector"><a href="#" data-id-selector="17" data-year-selector="1995">1995</a></li><li class="time-line-selector"><a href="#" data-id-selector="18" data-year-selector="1996">1996</a></li></ul> 
 
     </div>

我喜歡做什麼？我希望當用戶點擊某個日期時，這個日期使用滾動集中，沒有人知道如何做到這一點？

小提琴：http://jsfiddle.net/vvtsvr3e/

Answer 1

嘗試在你的Click事件處理程序的末尾添加以下行：

$("#time-line-selector").scrollLeft($(this).attr("data-id-selector") * $(this).parent().width() - $("#time-line-selector").width()/2 - $(this).parent().width()/2); 

所以結果是：

$("#time-line-selector ul li a").click(function (event) { 

    event.preventDefault(); 

    $("#time-line-selector ul li a").removeClass("active"); 

    $(this).addClass("active"); 

    var yearId = $(this).attr("data-id-selector"); 

    $("#time-line-container ul").animate({ 
     "margin-left": -((yearId - 1) * timeLineContentWidth) 
    }, 1000); 
    $("#time-line-selector").scrollLeft($(this).attr("data-id-selector") * $(this).parent().width() - $("#time-line-selector").width()/2 - $(this).parent().width()/2); 
}); 

或消除數據ID選擇器的使用：

$("#time-line-selector").scrollLeft(($(this).parent().index(".time-line-selector") + 1) * $(this).parent().width() - $("#time-line-selector").width()/2 - $(this).parent().width()/2); 

working fiddle