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
});

然而，这只是JS兼容，并且在~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

Nr 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;
  });
 });
}

网页之间的转换

3 个答案: