2011-08-12 21 views
1

私が達成しようとしているのは、4divsを「ウィンドウスペース」内で水平方向に(左から右に)スクロールさせることです。私はイージング・プラグインも含めていますが、「TopLinks」リンクをクリックしてdivを上下に動かすと完全に機能しますが、左から右へスクロールしようとするとイージングが完全に消えます。ScrollToプラグインを使用してdivを水平方向にスクロール

Iveは自分のCSSと何か関係があるのだろうと思ったが、わからない。この作業をするための助けをいただければ幸いです。ここに私のコードは次のとおりです。

HTML

<ul id="topLinks"> 
    <li><a href="#contact">Contact</a></li> 
    ... 
    <li><a href="#home">Home</a></li> 
</ul> 
.... 
<div id="slider"> 
    <div class="active" id="home"> 
    //code here 
    </div> 
    ... 
    <div class="active" id="contact"> 
    //Fourth & last div 
    </div> 
</div> 

CSS

#slider { 
    position:relative; 
    width:530px; 
    height:380px; 
    margin:60px auto auto 0px; 
    overflow:hidden; 
} 

div.active { 
    float:left; 
    text-align:justify; 
    line-height:30px; 
    width:530px; 
    height:380px; 
    margin: 0px 0px 5px 0px; 
    padding:0px; 
} 

JAVASCRIPT

$(document).ready(function() { 
    $('#topLinks li a').click(function() { 
     $('#slider').scrollTo($(this).attr('href'), 2500, {easing:'swing', axis:'x'}); 
    }); 
}); 

あなたが働いてデモを持っているので、私は、同様jsfiddleにそれをスローします。 http://jsfiddle.net/BftMr/

答えて

1

スライダーdiv内の各項目を、その項目に含まれる各項目の幅にまたがるdivで囲む必要があります。 (この場合、私が3000pxにそれをハードコードが、あなたはおそらく、これを動的に計算したいと思う)ここで

は実施例である:答えとしてそれをマークしてくださいない場合

http://jsfiddle.net/NdSyB/

は、この情報がお役に立てば幸いです。

+0

um。まだここでは新しい、私は答えとしてマークする方法を知っていないが、はいそれは助けています。ありがとう。 – Acour83

+0

心配しなくても、あなたを助けてくれてうれしいです。ここでは、説明しているメタスタックオーバーフローの質問です:[答えを受け入れる方法は?](http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work#5235) – jdavies

関連する問題