1

ページを 7 つの部分に分割し、各ページに 2 つの列 div を作成しました。右ボタンをクリックすると次の列にスクロールし、左ボタンをクリックすると左列にスクロールします。問題は、私が 1 ページ目にいて、2 列目から 3 列目にスクロールすると、ページから外れて x スクロールバーを手動で移動する必要があるとします。xオーバーフローを強制するようにボタンをプログラムする方法はありますか?

ありがとう

CSS

<style>
#contents {
width: 3500px; <!--Total size of the large container-->
height: 200px;
position: absolute; }

#container {
height: 500px;
overflow: hidden;
position: relative;
border: 1px #000 solid;
   }
#container, .col {
width: 500px;<!--total size of each column.-->
}
.col {

float: left;
 }
</style>

HTML 

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

これをさらに6つの列で行いました。

ジャバスクリプト

<script>
   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);
});
</script>
4

1 に答える 1

1

クリックに複数の関数を割り当てるには、既存の関数から関数を呼び出すか、他の 2 つの関数を呼び出す専用の新しい関数を作成します。

于 2013-02-19T16:50:38.900 に答える