jquery - 水平网页显示的最佳方法？

Question

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

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

感谢您的帮助

Answer 1

也许这会让您开始:

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>​

<强> DEMO

编辑:

为了导航到上一页/下一页，请添加以下内容:

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>​

<强> DEMO 2