如何實現水平jQuery的滑塊效果

我有HTML <li>元素的列表，我想這與jQuery水平滾動，並有當前的日期顯示更大，這一點是我可以做的文字效果，但我有不知道如何去編碼水平滑塊。如何實現水平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; 
}

來源

2013-10-07 001221

你嘗試過什麼到現在？此鏈接到[jQuery的]（http://jquery.com/）和[jQuery插件]（http://plugins.jquery.com/）是一個很好的起點。 –

退房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/

來源

2013-10-07 14:57:14 Phil

確定剛剛讀了這一點，並做到公平好像此刻的最佳解決方案。感謝那！ – 001221

如果您對「yearswrapper」使用溢出你可以得到一個水平滾動條出現。然後，您可以定位滾動條 - 本頁面也許有些幫助：

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

或這可能會有幫助：

Crossbrowser content scroller with custom look

來源

2013-10-07 14:50:05 matpol

如何實現水平jQuery的滑塊效果

回答

相關問題