Горизонтальная и вертикальная прокрутка на +-образном сайте
В настоящее время я работаю над сайтом, с которым у меня довольно много трудностей. По сути, я пытаюсь сделать сайт в форме +, который должен иметь систему двунаправленной прокрутки. Я пытаюсь сделать сайт похожим на это:
ЕЭК
C C C
ЕЭК
Где E - пустое, невидимое пространство. И C - это настоящий div с содержанием в нем. Все div-ы контента будут иметь ссылки друг на друга, поэтому пользователь может посещать другие части сайта.
Поскольку мой jQuery и JavaScript не самый лучший, у меня было много проблем, чтобы заставить сайт прокручивать ссылку-щелчок-действие. Наконец-то мне удалось заставить его работать с библиотекой jQuery scrollTo, хотя теперь у меня другая проблема. Теперь пользователь по-прежнему может прокручивать "пустые" части веб-сайта, что является большой проблемой с удобством использования. Я попытался закрыть это пустое пространство, используя overflow:hidden, но это нарушает всю систему прокрутки. В то же время, я бы хотел, чтобы средний контент показывался первым при входе на сайт (box5). Но так как мои навыки jQuery/Javascript в настоящее время чрезвычайно дрянны, у меня много проблем с тем, чтобы заставить этот сайт работать.
Любая помощь или подталкивание в правильном направлении будет высоко ценится!
Вот моя текущая работа:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--<link href="css/reset.css" rel="stylesheet" type="text/css" />-->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- Load jQuery (newer versions will not work) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- Load ScrollTo -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
<!-- Load LocalScroll -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>
<!-- Load Link Scrolling-->
<script src="js/init.js"></script>
</head>
<body>
<div id="box-links">
<!-- Temporary table as site reference -->
<table width="400" border="1" cellspacing="1" cellpadding="1">
<tr>
<td>(Empty)</a></td>
<td><a href="#box2" class="box2link">box2 (News)</a></td>
<td>(Empty)</a></td>
</tr>
<tr>
<td><a href="#box4" class="box4link">box4 (Day 1)</a></td>
<td><a href="#box5" class="box5link">box5 (Home/Index)</a></td>
<td><a href="#box6" class="box6link">box6 (Day 2)</a></td>
</tr>
<tr>
<td>(Empty)</td>
<td><a href="#box8" class="box8link">box8 (Unspecified)</a></td>
<td>(Empty)</td>
</tr>
</table>
</div><!-- end box-links-->
<div id="master_container">
<div id="box2" class="container">
</div>
<div id="box4" class="container">
</div>
<div id="box5" class="container">
</div>
<div id="box6" class="container">
</div>
<div id="box8" class="container">
</div>
</div> <!-- end master container-->
<footer>
</footer>
</body>
</html>
style.css
@charset "utf-8";
/* Temporary placement of reset.css */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
/*table, tr, th, td, tijdelijk uitgehaald */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, tbody, tfoot, thead,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*====================================================================================*/
html, body {
width: 100%;
height: 100%;
}
#master_container{
width:300%;
height:300%;
min-width:3000px;
}
.container{
width: 33.2%;
height: 33.3%;
float: left;
background-color: #0CF;
border: 2px dashed #000;
}
#box2, #box8{
margin: 0 33.3% 0 33.3%;
}
footer{
position:fixed;
width:100%;
height:50px;
background-color:#F00;
bottom:0px;
}
init.js
jQuery(function( $ ){
/**
* Most jQuery.localScroll's settings, actually belong to jQuery.ScrollTo, check it's demo for an example of each option.
* @see http://flesler.demos.com/jquery/scrollTo/
* You can use EVERY single setting of jQuery.ScrollTo, in the settings hash you send to jQuery.LocalScroll.
*/
// The default axis is 'y', but in this demo, I want to scroll both
// You can modify any default like this
$.localScroll.defaults.axis = 'xy';
// When the document is loaded...
$(document).ready(function()
{
// Scroll the whole document
$('#box-links').localScroll({
target:'body',
queue:true,
duration:1000,
hash:true,
onBefore:function( e, anchor, $target ){
// The 'this' is the settings object, can be modified
},
onAfter:function( anchor, settings ){
// The 'this' contains the scrolled element (#content)
}
});
});
});
Пожалуйста, извините, если я не правильно разместил код здесь.
1 ответ
Вчера у меня была та же идея, и я смог понять ее. В моем примере используется плагин scrollTo и несколько простых анимаций jquery. Это, вероятно, можно немного исправить, но это только начало.
Вот скрипка
HTML
<section class="right">
<h1>Right</h1>
<h2><a href="#" class="toggle-left">Left</a></h2>
</section>
<section class="left">
<h1>Left</h1>
<h2><a href="#" class="toggle-right">Right</a></h2>
</section>
<section class="middle">
<h1>Home/middle</h1>
<h2><a href="#" class="toggle-up">up</a></h2>
<h2><a href="#" class="toggle-down">down</a></h2>
<h2><a href="#" class="toggle-left">Left</a></h2>
<h2><a href="#" class="toggle-right">Right</a></h2>
</section>
<section class="top">
<h1>Top</h1>
<h2><a href="#" class="toggle-down">down</a></h2>
</section>
<section class="bottom">
<h1>Bottom</h1>
<h2><a href="#" class="toggle-up">up</a></h2>
</section>
JQuery
jQuery(document).ready(function ($) {
var width = $(window).width();
var height = $(window).height();
$('html').scrollTo('+=' + width, 0, {
axis: 'x'
})
//left & right section
$(".toggle-right").click(function () {
$('html').scrollTo('+=' + width, 800, {
axis: 'x'
});
});
$(".toggle-left").click(function () {
$('html').scrollTo('-=' + width, 800, {
axis: 'x'
});
});
//top section
$(".top .toggle-down").click(function (e) {
e.preventDefault();
$('.top').animate({
top: "-100%",
}, 800);
$('.middle').animate({
top: "0",
}, 800);
});
//middle section
$(".middle .toggle-up").click(function (e) {
e.preventDefault();
$('.top').animate({
top: "0",
}, 800);
$('.middle').animate({
top: "100%",
}, 800);
});
$(".middle .toggle-down").click(function (e) {
e.preventDefault();
$('.bottom').animate({
bottom: "0",
}, 800);
$('.middle').animate({
top: "-100%",
}, 800);
});
//bottom section
$(".bottom .toggle-up").click(function (e) {
e.preventDefault();
$('.bottom').animate({
bottom: "-100%",
}, 800);
$('.middle').animate({
top: "0",
}, 800);
});
});
CSS
html {
height:100%;
overflow:hidden;
}
body {
font: 20px/21px Helvetica, Arial, sans-serif;
color: #6c6c6c;
height:100%;
}
a {
color: #e74b34;
text-decoration: none;
}
a:hover {
color: #132c3b;
text-decoration:none;
}
section {
height:100%;
max-width:100%;
width:100%;
text-align: center;
}
.top {
background: #111;
position:absolute;
right:0;
left: 100%;
top:-100%;
}
.bottom {
background: #111;
position:absolute;
right:0;
left: 100%;
bottom:-100%;
background: #ccc;
}
.middle {
background: #000;
position: absolute;
left: 100%;
top:0;
}
.right {
background: #111;
position:absolute;
left:200%;
top:0;
}