0

ページがあり、コンテナ内のデータを次のようにスクロールしたかった: http://jsfiddle.net/pXy2C/。

複数の div を使用してスクロールできるテキストの列を隣り合わせに作成しました。今...これらの各divで、コンテナを次のdivまたは前のdivにスクロールするボタンを作成したいと思います。上記の jsfiddle の例の問題は、最初と最後の 200px のみをロールオーバーすることです。必要なことを行うためにオフセットを取得する方法はありますか?

私の試みはここhttp://jsfiddle.net/3xgSX/ですが、下にも貼り付けます。

助けてくれてありがとう。

CSS:

#container{
width:1000px;
height:500px;
overflow:hidden;
Position:relative;border:1px #000 solid;
}

#contents{
width:1000px;
height:200px;
position:absolute;
top:0;
left:0;
}

HTML: 

<!--Column 1--> 
<div style='float:left; width:150px'>
Put your content here...
<button id="left">Left</button>
<button id="right">right</button>
</div><!--end div colomn 1-->


 <!--Column 2-->    
 <div style='float:left; width:150px; margin-left:300px'>
Put another content here...
<br>
<button id="left">Left</button>
<button id="right">right</button>

</div><!--End div column2-->



 </div><!--End div "contents"-->

Javascript:

<script type="text/javascript">
   $(document).ready(function(){
$("#right").click(function(){
    $("#contents").animate({left:'-200px'},500);
    $("#container").animate({'margin-left':'200px'},500);
});
$("#left").click(function(){
    $("#contents").animate({left:'0px'},500);
     $("#container").animate({'margin-left':'0px'},500);
});
});
</script>
4

1 に答える 1

0

わかりました、我慢してください、ここで対処する必要がある多くの問題があったので、少し詳しく説明します.

CSS

質問に記載されているモデル フィドルと同じ効果を得るには#containers、列と同じ幅が必要です。の幅に列数 (この例では 3 つ) を掛けた#contents値に等しい幅が必要です。元のコードのインライン CSS を置き換えます。#containers.col

#contents {
    width: 600px;
    height: 200px;
    position: absolute;
}
#container {
    height: 500px;
    overflow: hidden;
    position: relative;
    border: 1px #000 solid;
}
#container, .col {
    width: 200px;
}
.col {
    float: left;
}

HTML

指定idされたものは一度しか使用できないため、要素の#rightandをandに変更しました。あなたの質問は、この一般的な手法を 2 つ以上の列に適用する方法について具体的に尋ねていたので、3 番目の列も追加しました。#leftbutton.right.left

<div id="container">
    <div id="contents">

<!--Column 1--> 
<div class="col">
    <p>Put your content here...</p>
    <button class="left">Left</button>
    <button class="right">right</button>
</div><!--end div colomn 1-->


<!--Column 2--> 
<div class="col">
    <p>Put another content here...</p>
    <button class="left">Left</button>
    <button class="right">right</button>
</div><!--End div column2-->


<!--Column 3--> 
<div class="col">
    <p>Put another content here...</p>
    <button class="left">Left</button>
    <button class="right">right</button>
</div><!--End div column3-->



    </div><!--End div "contents"-->
</div><!--End div container-->

JavaScript

.animate()jQuery メソッドを希望どおりに動作させるには、相対プロパティ値を使用する必要があります (詳細については、API.animate()ページを参照してください)。#container列から滑り落ちないようにするために、単純な関数 を作成しgetOffset()、 の境界に対してチェックしました#contents。

また、JS にできるだけ少ない値をハードコーディングし、代わりに DOM から読み取る必要がcolwidthありcontwidthます。

var colwidth = $('#container').width(),
    contwidth = $('#contents').width(),
    getOffset = function() {
        return parseInt($('#container').css('margin-left'));
    };

$(".left").click(function(){
    if (getOffset() === 0) return false;

    $("#contents").animate({left: '+=' + colwidth},500);
    $("#container").animate({'margin-left': '-=' + colwidth},500);
});
$(".right").click(function(){
    if (getOffset() === contwidth - colwidth) return false;

    $("#contents").animate({left: '-=' + colwidth},500);
    $("#container").animate({'margin-left': '+=' + colwidth},500);
});

作業を続ければ、おそらくもっと洗練された解決策がありますが、これは正しい方向に向かうはずです。

于 2013-02-18T19:58:30.693 に答える