보이지 않는 상자 뒤에 숨겨진 자바 스크립트 리본

Question

두 이미지가 있습니다. 하나는 리본의 절반이고 두 번째 이미지는 페이 스북 링크가있는 풀 리본입니다. 페이지 중간에 첫 번째 페이지가 있어야하므로 클릭하면 페이지가 확장됩니다. 내가 숨겨진 오버레이 또는 뭔가를 사용해야하지만 난 완전히 자바 스크립트에 새로운 생각.

누군가가 예제를 제공하거나이를 도와 줄 수 있습니까?

Answer 1

나는 당신이 원하는 것을 이해하려고 노력했고 이것이 당신이 의미하는 바가 있다면 말해줍니다.

두 개의 이미지를 두 개의 sepatare div에 래핑 한 다음 div에서 위치를 상대적으로 감쌀 수 있습니다.

그런 다음 두 divs 위치 절대 값을 지정하십시오.

첫 번째 div를 클릭하면 두 번째 div 왼쪽 위치 (또는 세로 효과를 원하면 상단)가 변경됩니다. 결국 당신

$("#frontDiv").click(function(){ 
    $("#backDiv").animate({"left":"45px"}, 300); //{"top":"20px"} for vertical effect 
}); 

: 여기

<div style="position: relative"> 
    <div id="frontDiv"> 
     aaaaaaaaaaaa 
    </div> 
    <div id="backDiv"> 
     bbbbbbbbbbb 
    </div> 
</div> 

는 CSS :

#frontDiv{ 
    height: 20px; width: 45px; 
    background: red; position: absolute; 
    z-index: 1; left: 0px; top: 0px; 
} 

#backDiv{ 
    height: 20px; width: 30px; 
    background: blue; position: absolute; 
    z-index: 0; left: 0px; top: 0px; 
} 

그리고 여기 (jQuery를에) 자바 스크립트 여기

는 div의와 HTML입니다 래퍼 div를 원하는 위치에 배치 할 수 있습니다. 이 바이올린의

전체 예 : http://jsfiddle.net/w7RVe/