网页之间的转换

Question

我有4个不同的html网页。每个只包含背景照片。我想和以下网站：

• 索引页
• 按钮访问其他网页

不过，我需要在浏览器视图在导航水平滑动到下一页。我怎样才能做到这一点？

此外，我所有的图像都是1280x800，我担心它们适合低分辨率的浏览器窗口，因为我不想有滚动条。

Answer 1

用脚本更新了答案！

我前一阵子做了这个，并且认为它可以大大地帮助你，给你一个想法。

我正在做的是根据点击哪个导航链接淡入和淡出主div。它的行为好像是一个多页面的网站，但实际上它只是在一个和另一个之间淡出。

下面是HTML的结构应该是什么样子：

<nav> 
    <ul class="mainNav"> 
     <li class="active"><a href="#" id="home">Home</a></li> 
     <li><a href="#" id="about">About Us</a></li> 
     <li><a href="#" id="port">Portfolio</a></li> 
     <li><a href="#" id="contact">Contact</a></li> 
    </ul> 
</nav> 
<div id="wrapper-home" class="body active"> 
    <p>Here is some content!</p> 
</div> 
<!-- Etc, etc, etc --> 

现在，使这种情况发生，使用CSS的脚本：

$('ul.mainNav li a').on('click', function() { 
    $('ul.mainNav li a').parent().removeClass('active'); 
    $(this).parent().addClass('active'); 
    var id = $(this).attr('id'); 
    var wrapper = $('#wrapper-' + id); 

    $('.body').removeClass('active'); 
    $(wrapper).addClass('active'); 
}); 

最后一个小提琴：Demo

---

-1。您可以将图像设置为背景图像。然后在你的CSS，你可以添加如下：

background-image: url("yourImageUrl.jpg"); 
background-size: cover; 
background-position: center center; 

这将使图像以适应整个页面，并保持图像的比例。

-2。在我看来，最好的选择是把所有东西都放在一个页面上。然后，您可以隐藏并显示包含信息的div，同时添加转场效果。

Answer 2

你可以删除你的链接的href目标，并执行转场，然后页面变化的javascript函数替代

旧链接：

<a href="page.html">link to next page</a> 

新链接：

<a href="javascript:transitionTo('page.html');">link to next page</a> 

然后用一些javascript：

function transitionToPage(sNewPage){ 
    // insert your transition out fade effect code here 
    window.location = sNewPage; 
} 

如果你也想处理过渡到一个页面，那么我建议有一个默认为空类型看的页面，从该内容

$(document).ready(function(){ 
    // insert your transition code from blank page or whatever default to desired look 
}); 

这就onload事件过渡将然而，仅是JS compatable，并且不适用于大约1.5％的浏览器。因此，我建议在实际使用一个懒惰的链路负载技术：

<a class="lazy_load_link" href="page.html">link to next page</a> 
$(document).ready(function(){ 
    var sTarget = $(".lazy_load_link").attr("href"); 
    $(".lazy_load_link").attr("javascript:transitionToPage('"+sTarget+"');'); 
}); 

Answer 3

上午十时正1.将使用CSS和设置背景大小来覆盖的背景。

Nr 2.在跨度上进行onclick。并将其设置为按钮。

<span onclick="goToPage('home.html')">Home</span> 

的Javascript：

function goToPage(page){ 
$(document).ready(function(){ 
    $('body').fadeOut(2000, function(){ 
    window.location=page; 
    }); 
}); 
}