2011-12-20 2 views
0

は、だから私はウェブデザインのためのいくつかのものをしようとしているが、私は次のような考え方に問題のビットを抱えている私のナビゲーションバーの下にスムーズに移動作り:だから私はリッテを作るしようとしているラインが

。 pngライン私はナビバーの下をスムーズに動かしました。だから私は別のリンクをクリックすると、そのサイトをスライドさせて、そのサイトがアクティブである限りそこにとどまりますが、コードを見つけるのに少し問題があります。

誰かがこれまたは前に書いたコードの役に立つリンクがあれば、本当に感謝しています。

答えて

0

jquery animate,を試してみるか、divとsetTimeoutのscrollTop、scrollLeftを自分で構築したい場合は、それを調べてください。

例えば、

<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> 

よろしく、

ベン

+0

にStackOverflowへようこそ - あなたは一般的に、我々はどちらか含まれている特定のコードに私たちの答えを好む、ということを知っている必要がありますスニペット、[リンク](http://api.jquery.com/animate)を参照してください。 – Blazemonger

+0

ロジャー、ありがとう。 – benbai123

+0

オク・ベン、ありがとう、私はそれをトモロウで試してみて、それがどのように働いたかを教えてくれる! –