웹 사이트의 페이지 슬라이더

Question

나는 웹 프로그래밍에 익숙하지 않습니다. flip.hr과 같은 것을 만들고 싶습니다. 나에게 흥미가있는 것은 페이지 하단의 탐색 막대를 클릭 할 때 생성되는 슬라이딩 효과입니다. 현재 내가 아는 것은 this으로, 페이지의 다른 부분에 하이퍼 링크를 만들고 여기를 클릭하면 특정 부분으로 이동합니다. 이제 완료된 슬라이딩 효과를 만들고 싶습니다. here. 이것을 달성하도록 안내해주십시오.

Answer 1

LIVE DEMO

그것은 정말 간단합니다, 는의는 먼저 어린이 원하는 DIV 페이지로해야합니다 바닥 탐색과 #pages DIV가 있다고 가정 해 보자 absolute을 width 및 height100 % 페이지로 설정하십시오.

탐색 앵커가 같은 앵커 이름 상대적 페이지 ID으로을 얼마나

jQuery(function($){ 

    function showPage(pageID){ 
     var pID = pageID || window.location.hash; 
     $('#pages > div:gt(0)').animate({left: '-100%'}, 600); 
     $(pID).stop().animate({left:0}, 600); 
    } 
    showPage(); 

    $('#nav a').click(function(){ 
     showPage($(this).attr('href')); 
    }); 

}); 

참고 :

#pages > div{ 
    position:absolute; 
    width:100%; 
    height:100%; 
} 
#pages div + div{ // To keep "HOME page" at 0 but push away all other pages 
    left:-100%; /* note this */ 
} 

// Style buttons and pages 
#home, a[href="#home"] {background:#078;} 
#about, a[href="#about"] {background:#780;} 
#products,a[href="#products"]{background:#807;} 
#contact, a[href="#contact"] {background:#088;} 

#nav{ 
    position:fixed; 
    bottom:0; 
    width:100%; 
    table-layout:fixed; 
} 
#nav a{ 
    display:block; 
} 

당신이 필요로하는 모든이의 jQuery이 작은 비트입니다. 이제 설명합니다 :

$('#nav a').click(function(){ 

지금 우리가 필요로하는 모든이 전달 된 인수 pageID OR (||) 경우로 대상 페이지의 ID를 읽어들이는 기능이 기본적으로 URL 표시 줄에 #pagename 해시를 설정합니다 주소창에서 window.location.hash을 읽으려는 시도가 없습니다.

이

http://www.example.com/#contact 

showPage(); 기능 트리거가 원하는 페이지로 데려합니다 : 당신은 내가 좋아하는 친구에게 페이지 링크를 붙여 cpoy 경우 있는지 확인하는 방법을 수행

. 우리는 항상 간단하게 (인덱스보다 큰 )에 jQuery를 :gt() 선택기를 사용하여 다른 모든 페이지를 대상으로 0 왼쪽 픽셀에서 홈 페이지를 유지해야합니다 기능 내부

는 :

$('#pages > div:gt(0)').animate({left: '-100%'}, 600); // speaks by itself 

우리는 단지를 대상으로보다 페이지 ID이 필요하고 우리는 그것을 자리에서 움직입니다.

• 우리가
가로드 된 페이지가 이미 주소창에 hash을했다나요 클릭 된 앵커 href 속성을 통과했다. jQuery로

---

단순히

$('#nav a').click(showPage); 

처럼하지만 우리의 함수 내에서보다 우리는 우리가 어떤 애니메이션을 적용하기 전에 변경할 수있는 HASH 대기해야한다 또한 것 할 수있는 또 다른 방법. 그 목적을 위해 setTimeout would be fine:

function showPage(){ 
    setTimeout(function(){ 
    $('#pages > div:gt(0)').animate({left: '-100%'}, 600); 
    $(window.location.hash).stop().animate({left:0}, 600); 
    },100); 
} 
showPage(); 

Answer 2

실제로 페이지를 섹션으로 설정하고 클릭 이벤트에 대한 변환을 시도 할 수 있습니다. 정말 도움이 될 것입니다. 당신이 jQuery를 함께 조금 잘 알고있는 경우 This will help You

Answer 3

, 당신은 결국 slide 효과를 사용하여 jQuery를 UI에서 .show() 기능을 사용할 수 있습니다.

또는 HTML/CSS로만 만들 수 있습니다. this one처럼 웹에 튜토리얼이 많이 있지만 div는 100 % 너비와 높이가됩니다.

<div id="pages"> 
    <div id="home">HOME PAGE</div> 
    <div id="about">ABOUT PAGE</div> 
    <div id="products">PRODUCTS PAGE</div> 
    <div id="contact">CONTACT</div> 
</div> 

<table id="nav"> 
    <tr> 
    <td><a href="#home">HOME</a></td> 
    <td><a href="#about">ABOUT</a></td> 
    <td><a href="#products">PRODUCTS</a></td> 
    <td><a href="#contact">CONTACT</a></td> 
    </tr> 
</table> 

모두 당신이 필요 position:fixed#nav이다 :