0

情報の列が 3 つあり、この情報の一部を、一度に 1 つの列だけを表示する「ビューポート」(適切な用語がないため) に表示したいと考えています。ユーザーは左右にスクロールして他の列を表示できますが、ビュー A、ビュー B、ビュー C など、直接アクセスできるボタンも必要です。

textA               textB           textC
textA               textB           textC
textA               textB           textC
textA           _____________       textC
textA           |   textB   |       textC
textA           |   textB   |       textC
textA           |   textB   |       textC
textA           |   textB   |       textC
textA           |   textB   |       textC
textA           _____________       textC

         | view A | view B | view C |

「ビューポート」だけがユーザーに表示され、ビューポートの下のボタンは下にある列をビューポートにスクロールする必要があることに注意してください。私はこれを十分に説明していると思います:)

ストックの答えは、さまざまな「JQuery を使用する」ことだと確信していますが、具体的なヒントやヒントをいただければ幸いです。それが（悲しいことに）「できない」であっても。ありがとう！

4

2 に答える 2

2

これがテストされたあなたの答えです：http: //jsfiddle.net/maniator/8fFVD/2/
（これは次と前であり、表示したい段落を選択するために展開できます）

CSS:

#viewPort {
    overflow: auto;
    height: 200px;
    width: 250px;
    background: black;
    color: white;
}

.data {
    display: none;
}

html:

<div id="viewPort">

    <div class='data'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sollicitudin pulvinar dolor, vel dignissim velit porta nec. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer aliquam adipiscing odio, quis pellentesque nunc luctus vitae. Aenean dolor sem, tristique nec semper vel, ultricies eget sapien. Nulla nulla diam, euismod ut dapibus faucibus, porta eget nibh. Vivamus tempus ipsum quis metus lobortis in tempus est egestas. Nulla pretium ultricies dignissim. Nam tincidunt lorem vitae arcu placerat mollis. Pellentesque dictum justo ac mi viverra sit amet auctor massa sollicitudin. Suspendisse nisi nisi, varius ac ultricies vel, faucibus ut risus.
    </div>
    <div class='data'>
        Nam eget magna lacus, ut accumsan elit. Sed accumsan tincidunt accumsan. Proin urna elit, porttitor sed elementum a, tempor vel nulla. Nulla sollicitudin elementum neque nec gravida. Duis vel auctor urna. Suspendisse vel nulla neque, at malesuada sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed in metus in risus suscipit lobortis eget eu urna. Quisque et tortor at augue varius cursus. Sed molestie sem eu justo porta aliquam. Donec libero dolor, aliquam euismod egestas ac, venenatis ac nulla. Suspendisse potenti. Aenean tortor orci, malesuada id pulvinar et, consequat ut lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris vel lacus erat, ultrices volutpat libero. Suspendisse mi magna, placerat quis ultrices et, condimentum vitae nisi. Aenean tellus tortor, dignissim nec facilisis a, tempus vel arcu. Cras lacinia porta rhoncus. Cras vel nunc eget felis varius gravida in in eros.
    </div>
    <div class='data'>
        Aenean facilisis, nisi et sodales iaculis, purus enim eleifend ante, quis cursus justo elit ut ligula. In eleifend turpis tellus, nec mollis dolor. Nunc blandit tellus nec nunc consequat a bibendum mi aliquet. Sed et velit id mauris malesuada blandit. Pellentesque commodo metus vel magna bibendum at volutpat turpis placerat. Aenean rutrum molestie velit, eu consectetur tellus placerat vitae. Morbi nisi dolor, tempus convallis sagittis at, aliquet in justo. Proin nec elit faucibus metus interdum commodo. Ut in vulputate est. Proin malesuada elit eget libero adipiscing eu tempus mi malesuada. Mauris consectetur elit vitae velit mattis tristique. Quisque sed ipsum sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse posuere dui vel lacus tempor tincidunt. Ut enim mi, aliquet sit amet fermentum non, volutpat in tortor. Nulla sed nisl tellus, eget imperdiet libero.
    </div>
</div>
<span class='n'>NEXT</span><br/><span class='p'>PREV</span>

そして最後にjs：

var index = 0;
var columns = $('.data');
columns.eq(index).show()

$('.n').click(function(){
     columns.eq(index).hide()
     index++;
     if(index+1 > $('.data').length) index = 0;
     columns.eq(index).show()
})

$('.p').click(function(){
     columns.eq(index).hide()
     index--;
     if(index < 0) index = columns.length -1;
     columns.eq(index).show()
})
于 2011-03-29T21:56:54.493 に答える
0

列が固定幅であると仮定すると、「jQueryを使用する」と簡単になります。

レイアウト：

<div class="container">
  <div class="column">
    textA
  </div>
  <div class="column">
    textB
  </div>
  <div class="column">
    textC
  </div>
</div>

CSS:

.container {
  width: 300px;
  overflow: hidden;
  scroll: auto;
}

.column {
  width: 300px;
}

JavaScript の例:

$('#linkA').click(function() {
  $('.container').animate({marginLeft: 0});
}

$('#linkB').click(function() {
  $('.container').animate({marginLeft: -300});
}

$('#linkC').click(function() {
  $('.container').animate({marginLeft: -600});
}

これは絶対にテストされていません:)。

于 2011-03-29T21:54:47.133 に答える