我期待開發一個新網站，並且正在尋找類似於http://www.brotips.com/的內容方滾動條，您可以在其中使用箭頭鍵/點擊內容下方的數字。HTML/CSS/Jquery content side scroller

是否有任何圖書館或教程，你推薦，我找不到適合這種效果的教程。

到目前爲止，我還想過用

<div style="width: 100%; overflow-x: scroll"> 
    <?php 
    //Get the number of posts from mysql database and the posts and output to table 
    ?> 
</div>

來源

2012-02-21 mintuz

類似[scrollTo]（http://demos.flesler.com/jquery/scrollTo/）？ – noob 2012-02-21 16:44:19

我不相信他們正在使用任何一種側滾動器。它看起來像他們正在使用服務器端分頁加上一些額外的JavaScript來處理箭頭鍵按下。 – Jrod 2012-02-21 16:53:27

我Google'd，發現這個，http://jqueryfordesigners.com/adding-keyboard-navigation/。教你如何將鍵盤導航添加到工作幻燈片插件。

如果我要這樣做，將從那裏開始。然後用實際內容替換圖像。然後申請到實際的工作場所和阿賈克斯。

來源

2012-02-21 17:17:49 mcometa

這樣做如果你DONOT知道如何使用Ajax加載，你可以通過jQuery的教程，輕鬆學習。無論如何，我會使用功能是：

function() { 
$("#TheIdOfYourItem").hide("slide", { direction: "left" }, 1000, function() { 
$("TheIdOfTheNewStuff").show("slide, { direction: "left"}, 1000); 
}); 

}

「TheIdOfYouritem」將是你需要隱藏「TheIdOfTheNewStuff」 ......你知道的東西;）

來源

2012-02-21 16:50:02 Leo

如果你分析的網站，實際上它不是一個卷軸。事實上，當你按下一個鍵然後更新de主容器時，它發送一個ajax請求。並且它正在更新帶有頁碼的URL。 I F你想類似的東西，你可以學習jQuery的AJAX功能（阿賈克斯（），獲得（）。員額（））和效果功能（淡入，淡出）

您ctake這裏看看http://www.chazzuka.com/ajaxify-your-web-pages-using-jquery-88/

來源

2012-02-21 17:02:25 pipo02mix

demo jsBin

下的代碼，你可以找到 '箭頭鍵導航'。

var slideN = $('.slide').length; 
var galW = $('#gallery').width(); 
var c = 0; 

// enlarge the slider element 
$('#slider').width(galW*slideN); 

// POPULATE NAVIGATION 
for(i=0; i<slideN; i++){ 
    $('#navigation').append('<div class="button">'+(i+1)+'</div>'); 
} 
// MAKE FIRST BUTTON 'active' 
$('#navigation .button').eq(0).addClass('curr'); 


// ADD PREV AND NEXT BTN TO NAVIGATION 
$('#navigation').prepend('<div class="nav prev">&#9668;</div>').append('<div class="nav next">&#9658;</div>'); 

// THE ANIMATION FUNCTION 
function slide(){ 
    $('#slider').stop(1).animate({left:'-'+(galW*c)},1000); 
    $('.button').eq(c).addClass('curr').siblings().removeClass('curr'); 
} 

// NAVIGATION (numbered) BUTTONS 
$('.button').click(function(){ 
    c = $(this).index()-1; 
    slide(); 
}); 

// COUNTER HANDLER 
function ch(){ 
    if(c === -1){c = slideN -1; return;} 
    c = c % slideN; 
} 

// PREV/NEXT NAVIGATION 
$('.nav').click(function(){ 
    if($(this).hasClass('next')){ 
    c++; ch(); slide(); 
    }else{ 
    c--; ch(); slide(); 
    }  
}); 

// ARROW KEY NAVIGATION 
$(document).keydown(function(e){ 
    if (e.keyCode === 37) { // if left arrow 
      $('.prev').click(); 
      return false; 
    } else if (e.keyCode === 39) { // if right arrow 
      $('.next').click(); 
      return false; 
    } 
});

來源

2012-02-21 17:44:02

HTML/CSS/Jquery content side scroller

回答

demo jsBin

相關問題