1

我面前有一个新项目，我必须创建一个 7 页的水平显示。中间页面将是主页，左侧和右侧将有 3 个其他页面。这是我第一次使用水平显示器。

什么方法是最好最直接的方法？！人们对此有想法吗？

谢谢您的帮助

4

1 回答 1

3

也许这会让你开始：

CSS

html,
body
{
    height:100%;
}
body
{
    margin:0;
    padding:0;
    overflow:auto;
}
ul
{
    margin:0;
    padding:0;
}
ul li
{
    margin:0;
    padding:0;
    list-style-type:none;
    float:left;
}
ul li.page-1,
ul li.page-3,
ul li.page-5,
ul li.page-7
{
    background-color:#655;
}
ul li.page-2,
ul li.page-4,
ul li.page-6
{
    background-color:#855;
}
.clearfix:after
{
    clear:both;
    content:'.';
    display:block;
    font-size:0;
    height:0;
    line-height:0;
    visibility:hidden
}
.clearfix
{
    display:block;
    zoom:1
}​

jQuery

var width=$(window).width();

$('body').css('width',(width*7)+'px').scrollLeft((width*3));

$('ul li').css({'width':width+'px','height':$(document).height()+'px'});

​HTML 

<ul class="clearfix">
    <li class="page-1">
        page 1
    </li><li class="page-2">
        page 2
    </li><li class="page-3">
        page 3
    </li><li class="page-4">
        page 4 (current)
    </li><li class="page-5">
        page 5
    </li><li class="page-6">
        page 6
    </li><li class="page-7">
        page 7
    </li>
</ul>​

演示

编辑：

为了导航到上一页/下一页添加：

jQuery

$('.prev').click(function()
{
    i=$(this).parent('li').index()-1;

    $('body').animate({scrollLeft:(width * i)});

    return false;
});

$('.next').click(function()
{
    i=$(this).parent('li').index()+1;

    $('body').animate({scrollLeft:(width * i)});

    return false;
});

HTML

<ul class="clearfix">
    <li class="page-1">
        page 1
        <a href="#" class="next">Next</a>
    </li><li class="page-2">
        page 2
        <a href="#" class="prev">Prev</a> &middot; <a href="#" class="next">Next</a>    
    </li>
    ....
    <li class="page-7">
        page 7
        <a href="#" class="prev">Prev</a>
    </li>
</ul>​

演示 2

于 2012-08-23T21:44:03.290 回答