導航使用jQuery

你能做到這一點，就像你可以用MooTools的導航使用jQuery

http://ryanflorence.com/slideshow/#navigation-demo

jQuery中

？所以你可以像那樣導航並使用左/右鍵？

2010-06-15 Karem

當然可以。

剛剛捕獲keydown事件的文件

$(document).keydown(function(evt) { 
    evt = evt || event; 
    switch (evt.keycode) { 
     case 37: //your left keycode 
      //now in each case statement you could 
      //load a new page via ajax and animate 
      //the new page into view. 
      // or you could do something different. 

     case 39: //your right keycode 

     case 38: //your up keycode 

     case 40: //your down keycode 
    } 

})

編輯：下面是一個實用的解決方案，你可以玩。基本上這個解決方案創建了一些div，並使用左右方向鍵淡入淡出。

<html> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $(document).keydown(function(evt) { 
      evt = evt || event; 
      var currentControlBoxIndex = parseInt($(".controlBox.controlBoxHighlight").text(), 10); 
      var leftControlBoxIndex = currentControlBoxIndex == 1 ? 3 : currentControlBoxIndex - 1; 
      var rightControlBoxIndex = currentControlBoxIndex == 3 ? 1 : currentControlBoxIndex + 1; 
      $("#f" + currentControlBoxIndex).toggleClass("controlBoxHighlight"); 
      $("#fade" + currentControlBoxIndex).fadeOut("slow", function() { 
       $(this).toggleClass("controlBoxHighlight"); 
      }); 

      switch (evt.keyCode) { 
       case 37: 
        $("#f" + leftControlBoxIndex).toggleClass("controlBoxHighlight"); 
        $("#fade" + leftControlBoxIndex).fadeIn("slow", function() { 
         $(this).toggleClass("controlBoxHighlight"); 
        }); 

        break; 
       case 39: //your right keycode 
        $("#f" + rightControlBoxIndex).toggleClass("controlBoxHighlight"); 
        $("#fade" + rightControlBoxIndex).fadeIn("slow", function() { 
         $(this).toggleClass("controlBoxHighlight"); 
        }); 
        break; 
      } 
     }); 
    }); 
</script> 
<style type="text/css"> 
    #controls { 
     position:absolute; 
     left:100px; 
     bottom: 100px; 
     z-index: 500; 
    } 
    .controlBox { 
     border: 1px solid #000000; 
     margin: 10px; 
     display: block; 
     float: left; 
     width: 20px; 
     height:20px; 
     text-align: center; 
    } 
    .controlBoxHighlight{ 
     color: #FFFFFF; 
     background-color: #000000; 
    } 
    .fadeDiv { 
     position:absolute; 
     left:0px; 
     top:0px; 
     width:100%; 
     height:100%; 
    } 
    .fadeDivTop { 
     z-index: 100; 
    } 
    .fadeDivBottom { 
     z-index: -100; 
    } 
</style> 
<body> 
    <div id="fade1" class="fadeDiv fadeDivTop" style="background-color:#FF0000;"> 
    </div> 
    <div id="fade2" class="fadeDiv" style="background-color:#00FF00;"> 
    </div> 
    <div id="fade3" class="fadeDiv" style="background-color:#0000FF;"> 
    </div> 
    <div id ="controls"> 
     <span id="f1" class="controlBox controlBoxHighlight">1</span> 
     <span id="f2" class="controlBox">2</span> 
     <span id="f3" class="controlBox">3</span> 
    </div> 
</div> 


</body> 
</html>

來源

2010-06-15 14:14:38

給我一分鐘...我會清理我的回答 – 2010-06-15 14:14:57

好的，你去...它的一個開始，應該指向正確的方向。 – 2010-06-15 14:21:29

我不明白，對不起，我是新來的，所以幫助我。隨着加載一個新的頁面通過ajax和動畫，那不是我想要的。我想要也許（想法）在

text1

text2

有這些「文本」，然後通過導航它顯示text2，等等..不可能可能嗎？ – Karem 2010-06-15 14:35:17

導航使用jQuery

回答

相關問題