0

我有三列信息，我想在一次只显示一列的“视口”（因为没有更好的术语）中显示部分信息。用户可以左右滚动查看其他列，但也需要有直接访问的按钮，例如视图 A、视图 B 和视图 C。下面是我尝试的粗略 ASCII 插图：

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