製作我行導航欄下平穩地移動

所以我想一些東西出來網頁設計，但我有一個有點問題，用下面的想法：製作我行導航欄下平穩地移動

所以我試圖讓豆蔻。我在我的導航欄下順利移動了png行。所以當我點擊另一個鏈接時，它會滑動並保持在那裏，只要該網站處於活動狀態，但我在查找代碼時遇到了一些問題，甚至嘗試過自己製作代碼。

如果任何人有一個這個或他們以前寫的代碼有用的鏈接，它將非常感激。

2011-12-20 Thomas W

嘗試jquery animate, 或研究scrollTop，scrollLeft的div和setTimeout如果你想建立你自己。

例如，

<html> 
<head> 
    <style type="text/css"> 
     .outer { 
      display: block; 
      width: 100px; 
      height: 100px; 
      overflow: hidden; 
     } 
     .inner { 
      display: inline-block; 
      float: left; 
      width: 100px; 
      height: 100px; 
     } 
    </style> 
    <script type="text/javascript"> 
     var isMoving; 
     function moveRight() { 
      if (!isMoving) { 
       isMoving = true; 
       var cnt = document.getElementById('container'); 
       for (var i = 1;i <= 10;i ++) 
        setTimeout(function() { 
         cnt.scrollLeft += 10; 
         if (cnt.scrollLeft % 100 == 0) isMoving = null; 
        }, 100*i); 
      } 
     } 
     function moveLeft() { 
      if (!isMoving) { 
       isMoving = true; 
       var cnt = document.getElementById('container'); 
       for (var i = 1;i <= 10;i ++) 
        setTimeout(function() { 
         cnt.scrollLeft -= 10; 
         if (cnt.scrollLeft % 100 == 0) isMoving = null; 
        }, 100*i); 
      } 
     } 
    </script> 
</head> 
<body> 
    <div id="container" class="outer"> 
     <div style="width: 300px"> 
      <div class="inner" style="background-color: green;"></div> 
      <div class="inner" style="background-color: red;"></div> 
      <div class="inner" style="background-color: blue;"></div> 
     </div> 
    </div> 
    <button onclick="moveRight();">move to right</button> 
    <button onclick="moveLeft();">move to left</button> 
</body>

問候，

本

來源

2011-12-20 17:56:20 benbai123

歡迎StackOverflow的 - 你應該知道的是，在一般情況下，我們希望我們的回答要麼含有特定代碼代碼片段或[鏈接]（http://api.jquery.com/animate）。 – Blazemonger 2011-12-20 18:04:27

羅傑，謝謝你的提醒。 – benbai123 2011-12-20 18:50:52

好的，本，謝謝我會試試看tomorow，讓你知道它是如何解決的！ – 2011-12-20 18:51:20

製作我行導航欄下平穩地移動

回答

相關問題