網頁之間的轉換

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