Question

我有一个html <li>元素列表，我想用jQuery水平滚动并让当前日期显示更大，这是我可以做的文字效果，但我不知道如何去编码一个水平滑块。

说到目前为止我所拥有的只是下面的内容或查看jsFiddle

<div class="yearswrapper">
    <ul class="yearslist">
        <li><a href="">2003</a></li>
        <li><a href="">2004</a></li>
        <li><a href="">2005</a></li>
        <li><a href="">2006</a></li>
        <li><a href="">2007</a></li>
        <li><a href="">2008</a></li>
        <li><a href="">2009</a></li>
        <li><a href="">2010</a></li>
        <li><a href="">2011</a></li>
        <li><a href="">2012</a></li>
        <li><a href="">2013</a></li>
    </ul>
    <p id="left">Slide Left</p>
    <p id="right">Slide right</p>
</div>

css.css

.yearslist li {
     display:inline;
}

Answer 1

查看jQuery滑块：http://jqueryui.com/slider/（确保下载jQuery，jQuery UI和UI CSS）。

一旦有了工作滑块，就会有一个名为slide的事件。每次用户更改滑块的值时，它都会检查此幻灯片事件。这个概念是您要检查slide事件的值并相应地更改CSS。

$( '#slider' ).slider({
    value: 1, // start at first li
    step: 1,  // slider moves up and down one to check each year
    max: 13,  // end at year 2013
    slide: function( event, ui ) {
        //check against the ui.value and change CSS
        $( 'li' ).eq( ui.value ).css( 'font-weight', 'bold' );
    }
})

此处jQuery滑块上有更多文档：http://api.jqueryui.com/slider/

Answer 2

如果在'yearswrapper'上使用溢出，则可以显示水平滚动条。然后，您可以定位滚动条 - 此页面可能有一些帮助：

http://api.jquery.com/?s=scroll

或者这可能会有所帮助：

Crossbrowser content scroller with custom look

如何实现水平jQuery滑块效果

2 个答案: