Question

我正在创建类似时间轴的内容，到目前为止，我有以下代码：

＆＃13;

        $("#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);
        });

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

我喜欢做什么？我希望当用户点击某个日期时，此日期使用滚动集中，是否有人知道如何执行此操作？

小提琴：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);
});

或消除data-id-selector的使用：

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

工作fiddle

div内部水平li，溢出：auto

1 个答案: