웹 페이지 간 전환

Question

4 개의 다른 html 웹 페이지가 있습니다. 각각은 배경 사진 만 포함합니다.

• 인덱스 페이지가
• 버튼이

그러나, 나는 다음 페이지로 탐색에 수평으로 밀어 브라우저보기를 필요로하는 다른 페이지를 액세스 할 : 나는 다음에 사이트를 만들고 싶어 . 어떻게해야합니까?

또한 내 이미지는 모두 1280x800이며 스크롤 막대가 없으므로 해상도가 낮은 브라우저 창 내부에 맞지 않을까 걱정됩니다.

Answer 1

스크립트로 답변이 업데이트되었습니다.

나는 이것을 오래 전에 만들었고, 그것이 당신을 크게 도울 수 있고 당신에게 아이디어를 줄 수 있다고 생각했습니다.

내가하고있는 일은 탐색 링크를 클릭했을 때의 기본 div를 페이드 아웃하는 것입니다. 멀티 페이지 웹 사이트 인 것처럼 행동하지만 현실적으로는 페이드 인 (fading)과 페이드 아웃 (fading) 중 하나입니다. 이제

<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

다음

는 HTML 구조가 보일 것입니다 방법입니다

---

-1. 이미지를 배경 이미지로 설정할 수 있습니다.

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

이미지가 전체 페이지에 맞게 및 이미지 비율을 유지 할 수 있도록 : 그런 다음 CSS에서 당신은 추적을 추가 할 수 있습니다.

-2. 가장 좋은 방법은 한 페이지에 모든 것을 만드는 것입니다. 그런 다음 전환 효과를 추가하는 동안 정보가 포함 된 div를 숨기고 표시합니다.

Answer 2

당신은 링크의 href가 대상을 제거하고 전환 후 페이지 변경을 수행하는 자바 스크립트 기능을 대체 할 수

이전 링크 :

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

새로운 링크 :

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

다음 자바 스크립트로 :

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> 

자바 스크립트 : 귀하의 질문에 다운 된 투표 이유

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