我正在尝试创建一个多方向的单页网站，如下所示或 this
[panel 1]
[panel 2]
[panel 3][panel 4][panel 5]
[panel 6]
我知道如何垂直或水平滚动，但不会一起滚动。 我正在寻找的效果与此类似.. http://jsfiddle.net/shavindra/zKxxK/39/
我希望每个面板都是 width: 100%;高度:1000px；
如果有人能给我一个简单的分解或指出正确的方向，我将不胜感激。
///////编辑 + 2//////////////
这是我的本地代码，但我无法复制@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>
最佳答案
试试这个:
采用不同的方法来定位页面，从而简化 HTML、javascript 和 CSS。
您会看到从一个页面滚动到另一个页面是由一对函数scrollBy()(用于相对页面选择)和scrollTo()(用于绝对页面选择)。
这可能不是您想要的，但可以为您提供更好的起点。
关于javascript - 多方位导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12788478/