슬라이드 내용/페이지 전환

something like they've got over at gimmebar.com을 다시 만들려고합니다.슬라이드 내용/페이지 전환

이미지를 클릭하면 콘텐츠 현재 페이지가 왼쪽으로 슬라이드되고 사라집니다. 대상 페이지가 오른쪽에서 페이드 인 및 슬라이드됩니다.

너비가 200 % 인 컨테이너에 두 개의 div를 만들고 내용을 스크롤하여 JqueryUI를보고 사용하고 div를 슬라이드하는 것과 같은 몇 가지 작업을 시도했습니다. div가 전혀 움직이지 않고 스크롤이 실패하고 srollLeft는 항상 0이됩니다. 슬라이드가 다소 효과적 이었지만 나에게는 동시에 실행되지 않는 것처럼 보였습니다. 두 번째 div는 첫 번째 div 바로 뒤에 오른쪽으로 미끄러 져 들어가는 대신 존재 함으로 나타납니다.

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>slide demo</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
    <style> 
    .container { 
     width: 100%; 
     float: left; 
     height: 800px; 
    } 
    #one { 
     background-color: red; 
    } 
    #two { 
     background-color: #333; 
     display: none; 
    } 
    </style> 
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
</head> 
<body> 
    <div class="container" id="one"></div> 
    <div class="container" id="two"></div> 
<script> 
$(document).click(function() { 
      $("#one").hide("slide", { direction: "left" }, 1000); 
      $("#two").show("slide", { direction: "left" }, 1000); 
}); 
</script> 
</body> 
</html>

달성하기가 쉬울 것 같지만 막혀 있습니다.

주의.

편집 : this fiddle에서 볼 수있는 것처럼 작동하도록되어 있습니다. 슬라이드가 있지만 페이드를 볼 수 없습니다. 또한 이것을 달성하는 더 좋은 방법이 있을지 모르지만 나는 div를 슬라이드하기 위해 제 3의 lib/plugin을로드 할 필요가 없다는 것에 상당히 만족하고 있습니다.

http://webadvent.org/2012/css-sliding-panels-by-bedrich-rios 개발자가 작성한 자습서를 찾았습니다. 솔루션으로 간주 될 것이라고 생각하십시오.

출처

2012-12-01 Oskar

웹 사이트에서 오래 전에 사용하지 않은이 jQuery 스크립트를 사용하는 것이 좋습니다. CODA SLIDER이라는 매력과 Kevin Batdorf이라는 코드가 붙어있어서 5 줄의 코드 만 만들었습니다.

행운

출처

2012-12-01 03:17:00 Minnen

개발자는 이제 [Liquid Slider] (http://liquidslider.com/)라는 후속 프로젝트에 연결됩니다. –

순수 자바 스크립트 해결 방법 : HTML에서

div.wrap {visibility: hidden; position: absolute; overflow: hidden; 
    top: 0; left: 0; width: 100%; height: 100%} 
div.wrap div.newContent {visibility: visible; position: relative; left: 100%;}

: 그것의 왼쪽 가장자리가에 있기 때문에 newContent의 사업부가 처음에 숨겨져

<div class="initContent"> 
    This is the content that is initially displayed 
</div> 
<div class="wrap"> 
    <div class="newContent"> 
     Put the content you want to be revealed here 
    </div> 
</div>

는 CSS에서 (wrap) div의 오른쪽 가장자리에 위치하며 CSS는 부모 div에서 오버 플로우되는 모든 내용을 숨기도록 브라우저에 지시합니다.

나서 숨겨진 콘텐츠는 점진적으로 100 %에서 0 % 내부 DIV위한 style.left 감소 0 내지 I 이렇게 약간 적응 될 수있는 class for opening/closing swipey menus했다 1. 불투명도를 증가시키는 타이머를 설정 공개한다. (편집 : a newer version)

출처

2012-12-01 17:09:28 Stuart

슬라이드 내용/페이지 전환

답변

관련 문제