Question

我正在尝试创建一个多方位的单页网站，如下面的this

    [panel 1]
    [panel 2]
    [panel 3][panel 4][panel 5]
    [panel 6]

我知道如何滚动垂直或水平但不能一起滚动。我正在寻找的效果类似于此.. http://jsfiddle.net/shavindra/zKxxK/39/

我希望每个面板都是宽度：100％;身高：1000px;

如果有人能给我一个简单的细分或指出我正确的方向，我将不胜感激。

///////编辑+ 2 ///////////////

~~这是我的本地代码，但我不能复制@ Beetroot-Beetroot解决方案。~~

以下代码现在适用于寻找类似解决方案的任何人。感谢@ Beetroot-Beetroot

<!DOCTYPE html>
<html lang="en">
<head>

<style type="text/css">

body {
    margin: 0px;
    overflow: none;
}

#content {
width: 100%;
height: 100%; 
position: absolute;


}
#scrollWrapper {
    position: relative;
    overflow: hidden;
}
#scroller {
    position: absolute;
}
.scrollitem {
    position: absolute;
    background: #F0F8FF;
    border: 1px solid black;
    display: none;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>

<body>
<div id="content">
<div id="scrollWrapper">
    <div id="scroller">
        <div class="col1 row1 scrollitem">col1, item1</div>
        <div class="col1 row2 scrollitem">col1, item2</div>
        <div class="col1 row3 scrollitem">col1, item3</div>
        <div class="col1 row4 scrollitem">col1, item4</div>
        <div class="col1 row5 scrollitem">col1, item5</div>

        <div class="col2 row1 scrollitem">col2, item1</div>
        <div class="col2 row2 scrollitem">col2, item2</div>
        <div class="col2 row3 scrollitem">col2, item3</div>
        <div class="col2 row4 scrollitem">col2, item4</div>
        <div class="col2 row5 scrollitem">col2, item5</div>

        <div class="col3 row1 scrollitem">col3, item1</div>
        <div class="col3 row2 scrollitem">col3, item2</div>
        <div class="col3 row3 scrollitem">col3, item3</div>
        <div class="col3 row4 scrollitem">col3, item4</div>
        <div class="col3 row5 scrollitem">col3, item5</div>
    </div>
</div>
</div>

</body>

    <script type="text/javascript">
    var $scroller = $("#scroller"),
        $scrollitems = $(".scrollitem"),
        borders = {
            top:    parseInt($scrollitems.css('border-top-width')),
            right:  parseInt($scrollitems.css('border-right-width')),
            bottom: parseInt($scrollitems.css('border-bottom-width')),
            left:   parseInt($scrollitems.css('border-left-width'))
        },
        margin = 8,
        currentPage = {
            jq: $(),
            x: 0,
            y: 0
        },
        scrollTime = 1200,
        xPitch,
        yPitch,
        inTransition = false;

    $(window).on('resize', function() {
        $("#scrollWrapper, #scroller").height($(document).height());
        $("#scrollWrapper, #scroller").width($(document).width());
        $(".scrollitem").width($(document).width() - borders.left - borders.right - 2);
        $(".scrollitem").height($(document).height() - borders.top - borders.bottom - 2);
        xPitch = $(document).width() + margin,
        yPitch = $(document).height() + margin
    }).trigger('resize');

    function scrollBy(coords) {
        //find new item relative to current
        coords.x += currentPage.x;
        coords.y += currentPage.y;
        return scrollTo(coords, false);
    };

    function scrollTo(coords, noScroll) {
        var def = new $.Deferred();
        var $newPage = $scrollitems.filter(".col" + coords.x).filter(".row" + coords.y);
        //if new page exists,
        if (!inTransition && $newPage.length) {
            inTransition = true;
            //position new page and show it
            var left = coords.x * xPitch,
                top = coords.y * yPitch;
            $newPage.css({
                'left': left,
                'top': top
            }).show();
            //scroll to new page
            var t = noScroll ? 0 : scrollTime;
            $scroller.animate({
                'left': -left,
                'top': -top
            }, t, function() {
                //hide current page (not really necessary if everything else is pixel perfect)
                currentPage.jq.hide();
                //update currentPage to reflect new page
                $.extend(currentPage, {jq:$newPage}, coords);
                inTransition = false;
                def.resolve();//allow something to happen after new page is loaded
            });
        }
        else { def.reject(); }//allow something to happen if new page doesn't exist
        return def.promise();
    }

    //go to initial page
    scrollTo({x:1, y:1}, true).done(function() {
        //here do whatever is necessary on initial page load
    });

    $(document).on('keydown', function(e) {
        e.preventDefault();
        switch (e.which) {
        case 37:
            scrollBy({x:-1, y:0}); // left
            break;
        case 38:
            scrollBy({x:0, y:-1}); // up
            break;
        case 39:
            scrollBy({x:1, y:0}); // right
            break;
        case 40:
            scrollBy({x:0, y:1}); // down
            break;
        }
    });
    </script>



</html>

Answer 1

试试这个：

http://jsfiddle.net/fakTV/1/

采用不同的方法来定位页面，允许简化HTML，javascript和CSS。

您将看到页面之间的滚动由一对函数scrollBy()（用于相对页面选择）和scrollTo()（用于绝对页面选择）处理。

这可能不是您想要的，但可能会为您提供更好的入门基础。

多方向导航

1 个答案: