Jquery水平滑塊的類別列表

Question

我試圖創建一個不同類別的滑動水平菜單。

我想使用一個具有固定寬度值的div層，而另一個div內的寬度與第一個寬度相同。這種方式只能看到第二個div的一部分。

我有兩個問題：

• 的所屬分類的HTML代碼不能正常工作，而不是看到第二個div的一部分，我看到有一個回車。

• 我試圖將第二個div移動到右側和左側，當用戶將鼠標放在類別列表兩側的標誌上時。

能給我一隻手，這是我的代碼：

<div style="overflow: hidden;width: 710px;height: 17px;"> 
     <div id="CategoryList"> 
      <span id="NavigateBackward"><</span> 
      <p class="MiniCategory" style="display: inline;">Category 1</p> 
      <p class="MiniCategory" style="display: inline;">Category 2</p> 
      <p class="MiniCategory" style="display: inline;">Category 3</p> 
      <p class="MiniCategory" style="display: inline;">Category 4</p> 
      <p class="MiniCategory" style="display: inline;">Category 5</p> 
      <p class="MiniCategory" style="display: inline;">Category 6</p> 
      <p class="MiniCategory" style="display: inline;">Category 7</p> 
      <p class="MiniCategory" style="display: inline;">Category 8</p> 
      <p class="MiniCategory" style="display: inline;">Category 9</p> 
      <p class="MiniCategory" style="display: inline;">Category 10</p> 
      <p class="MiniCategory" style="display: inline;">Category 11</p> 
      <p class="MiniCategory" style="display: inline;">Category 12</p> 
      <p class="MiniCategory" style="display: inline;">Category 13</p> 
      <p class="MiniCategory" style="display: inline;">Category 14</p> 
      <span id="NavigateFordward">></span> 
     </div> 
    </div> 


    <script language="javascript" type="text/javascript"> 
         $(document).ready 
         (
          Initialize() 
         ); 

         function Initialize() 
         { 
          InitList(); 

         } 
         function InitList() 
         { 
          $("#NavigateBackward").hover 
          (
           function() 
           { 
            $("#CategoryList").animate({ "left": "-=50px" }, 1500);  
           } 
          ); 
          $("#NavigateFordward").hover 
          (
           function() 
           { 
            $("#CategoryList").animate({ "right": "+=50px" }, 1500); 
           } 
          ); 
         } 
    </script> 

在此先感謝您的幫助。 親切的問候。 約翰。

Answer 1

在這種情況下，您可以使用jQuery Scrollable。 Is this你想要什麼？

Answer 2

還是自己做

$(document).ready (Initialize); 

function Initialize(){ 
    InitList(); 
} 

var moveLeft = false; 
var moveRight = false; 

var left = function() { 
    if (moveLeft) 
     $("div#CategoryList").animate({ "marginLeft": "-=5px" }, 150, 'linear', left); 
}; 

var right = function() { 
    if(moveRight) 
     $("div#CategoryList").animate({ "marginLeft": "+=5px" }, 150, 'linear', right); 
}; 

function InitList() { 
    $("span#NavigateBackward").hover(
     function() { moveLeft=true; left(); }, 
     function() { moveLeft=false; } 
    ); 
    $("span#NavigateFordward").hover(
     function() { moveRight=true; right(); }, 
     function() { moveRight=false; } 
    ); 
} 

而且您的標記有一些瑕疵的「前進」，「後退」手柄是div#CategoryList滾動左/右手柄本身就會消失時，這意味着裏面（你應該將他們之外的div#CategoryList