下一個和上一個視差導航
[英]Parallax next and previous navigation
問題描述
目前，對於我的視差站點，我在每個部分上都有上一個和下一個按鈕。 我只想在每個部分中使用一組上一個/下一個導航。
你能建議我在絞痛路線上走下去嗎？
HTML：
<head>
<title>The history of aeronautics</title>
<meta charset="utf-8" />
<meta name="description" content="A parallax scrolling experiment using jQuery" />
<link rel="stylesheet" media="all" href="css/main.css" />
<script src="js/modernizr.custom.37797.js"></script>
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="/js/jquery-1.6.1.min.js"><\/script>')</script>
<script src="js/parallax.js"></script>
</head>
<body>
<div id="wrapper">
<div id="car"><img src="images/car.png"></div>
<nav id="primary">
<ul>
<li>
<h1>Hospital</h1>
<a class="hospital" href="#hospital">View</a>
</li>
<li>
<h1>University</h1>
<a class="university" href="#university">View</a>
</li>
<li>
<h1>Health Centre</h1>
<a class="health-centre" href="#health-centre">View</a>
</li>
<li>
<h1>Horiba HQ</h1>
<a class="horiba-hq" href="#horiba-hq">View</a>
</li>
<li>
<h1>Entertainment Hub</h1>
<a class="entertainment-hub" href="#entertainment-hub">View</a>
</li>
<li>
<h1>Vet</h1>
<a class="vet" href="#vet">View</a>
</li>
<li>
<h1>General Hospital</h1>
<a class="general-hospital" href="#general-hospital">View</a>
</li>
</ul>
</nav>
<div id="content">
<article id="hospital">
<a href="#"><img src="images/image1.png"/></a>
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3><a class="university" href="#university">Next</a></h3>
</div>
</div>
</li>
</ul>
</article>
<article id="university">
<a href="#"><img src="images/image2.png"/></a>
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3><a class="hospital" href="#hospital">Prev</a></h3>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3><a class="health-centre" href="#health-centre">Next</a></h3>
</div>
</div>
</li>
</ul>
</article>
<article id="health-centre">
<a href="#"><img src="images/image3.png"/></a>
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3><a class="university" href="#university">Prev</a></h3>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3><a class="horiba-hq" href="#horiba-hq">Next</a></h3>
</div>
</div>
</li>
</ul>
</article>
<article id="horiba-hq">
<a href="#"><img src="images/image4.png"/></a>
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3><a class="health-centre" href="#health-centre">Prev</a></h3>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3><a class="entertainment-hub" href="#entertainment-hub">Next</a></h3>
</div>
</div>
</li>
</ul>
</article>
<article id="entertainment-hub">
<a href="#"><img src="images/image5.png" /></a>
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3><a class="horiba-hq" href="#horiba-hq">Prev</a></h3>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3><a class="vet" href="#vet">Next</a></h3>
</div>
</div>
</li>
</ul>
</article>
<article id="vet">
<a href="#"><img src="images/image6.png"/></a>
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3><a class="entertainment-hub" href="#entertainment-hub">Prev</a></h3>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3><a class="general-hospital" href="#general-hospital">Next</a></h3>
</div>
</div>
</li>
</ul>
</article>
<article id="general-hospital">
<a href="#"><img src="images/hospital.png"/></a>
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3><a class="vet" href="#vet">Prev</a></h3>
</div>
</div>
</li>
</ul>
</article>
</div>
<!-- Parallax foreground -->
<div id="parallax-bg3">
</div>
<!-- Parallax midground clouds -->
<div id="parallax-bg2">
<img id="bg2-1" src="images/blurred-buildings.png" />
</div>
<!-- Parallax background clouds -->
<div id="parallax-bg1">
<img id="bg1-1" src="images/clouds.png" />
</div>
</div>
</body>
js：$（document）.ready（function（）{
redrawDotNav();
/* Scroll event handler */
$(window).bind('scroll',function(e){
parallaxScroll();
redrawDotNav();
});
/* Next/prev and primary nav btn click handlers */
$('a.hospital').click(function(){
$('html, body').animate({
scrollTop:0
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
});
$('a.university').click(function(){
$('html, body').animate({
scrollTop:1500
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
});
$('a.health-centre').click(function(){
$('html, body').animate({
scrollTop:3800
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
return false;
});
$('a.horiba-hq').click(function(){
$('html, body').animate({
scrollTop:5500
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
});
$('a.entertainment-hub').click(function(){
$('html, body').animate({
scrollTop:6800
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
});
$('a.vet').click(function(){
$('html, body').animate({
scrollTop:7700
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
});
$('a.general-hospital').click(function(){
$('html, body').animate({
scrollTop:11000
}, 1000, function() {
parallaxScroll(); // Callback is required for iOS
});
});
/* Show/hide dot lav labels on hover */
$('nav#primary a').hover(
function () {
$(this).prev('h1').show();
},
function () {
$(this).prev('h1').hide();
}
);
});
/* Scroll the background layers */
function parallaxScroll(){
var scrolled = $(window).scrollTop();
$('#content').css('left',(0-(scrolled*.9))+'px');
$('#parallax-bg1').css('left',(0-(scrolled*.25))+'px');
$('#parallax-bg2').css('left',(0-(scrolled*.5))+'px');
$('#parallax-bg3').css('left',(0-(scrolled*.9))+'px');
}
/* Set navigation dots to an active state as the user scrolls */
function redrawDotNav(){
var section1Top = 0;
// The top of each section is offset by half the distance to the previous section.
var section2Top = $('#university').offset().left + 1000;
var section3Top = $('#health-centre').offset().left +3000;
var section4Top = $('#horiba-hq').offset().left +4000;
var section5Top = $('#entertainment-hub').offset().left +6000;
var section6Top = $('#vet').offset().left +6800;
var section7Top = $('#general-hospital').offset().left +9100;
$('nav#primary a').removeClass('active');
if($(document).scrollTop() >= section1Top && $(document).scrollTop() < section2Top){
$('nav#primary a.hospital').addClass('active');
} else if ($(document).scrollTop() >= section2Top && $(document).scrollTop() < section3Top){
$('nav#primary a.university').addClass('active');
} else if ($(document).scrollTop() >= section3Top && $(document).scrollTop() < section4Top){
$('nav#primary a.health-centre').addClass('active');
} else if ($(document).scrollTop() >= section4Top && $(document).scrollTop() < section5Top){
$('nav#primary a.horiba-hq').addClass('active');
} else if ($(document).scrollTop() >= section5Top && $(document).scrollTop() < section6Top){
$('nav#primary a.entertainment-hub').addClass('active');
} else if ($(document).scrollTop() >= section6Top && $(document).scrollTop() < section7Top){
$('nav#primary a.vet').addClass('active');
} else if ($(document).scrollTop() >= section7Top){
$('nav#primary a.general-hospital').addClass('active');
}
}
使用的js：
$(function() {
var $tabs = $('#content').tabs();
$(".ui-tabs-panel").each(function(i){
var totalSize = $(".ui-tabs-panel").size() - 1;
if (i != totalSize) {
next = i + 2;
$(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page »</a>");
}
if (i != 0) {
prev = i;
$(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Prev Page</a>");
}
});
$('.next-tab, .prev-tab').click(function() {
$tabs.tabs('select', $(this).attr("rel"));
return false;
});
});
抱歉，過長的帖子希望提供盡可能多的信息
謝謝
1 個解決方案
解決方案1
1 2013-09-16 05:42:39
您沒有在下一頁的href中插入錨標記，您需要在頁面的每個部分添加該標記，然后單擊該標記將自動轉到下一頁或上一頁。.因為您只插入（＃），所以為什么什么也沒發生...
在此示例中是否可以反轉下一個和上一個鍵盤導航？
[英]Is it possible to reverse the next and previous keyboard navigation in this example?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.