2012-09-13 5 views
0

Google 검색과 유사한 내 웹 사이트의 특정 이미지 위에 마우스를 올려 놓으면 슬라이드 패널을 만들 수있는 방법을 찾고 있습니다.jQuery : 호버 오버 슬라이드 패널

다른 웹 사이트 페이지를 표시하려면이 패널이 필요합니다. iframe 또는 PHP의 cURL을 사용하여 확신 할 수 있습니다. 여기

유사한 예이다 나는 무엇을 찾고 : http://srobbin.com/jquery-plugins/pageslide/

+0

아무 것도 시도해 보지 않으셨습니까? – PaperThick

+0

아니요, 저는 jQuery에별로 좋지 않습니다.하지만 필자가 필요한 플러그인을 찾지 못해 주로 발생했습니다. – Draven

+0

롤 예, 찾았습니다! 하지만 내가 찾는 것은 아닙니다. – Draven

답변

1

그것은 당신이 플러그인을 아주 쉽게 필요가 없습니다 것 :

HTML을

<img id="imgHover" src="img/photo.png"/> 
<div id="panel"> 
    <iframe src="http://www.website.com"></iframe> 
</div> 

JQUERY

$("#panel").hide(); 
$("#imgHover").hover(
    function(){ 
     $("#panel").slideDown(); 
    }, 
    function(){ 
     $("div").slideUp(); 
    } 
) 

실무 사례 :

http://jsfiddle.net/kirkas/SULhT/

업데이트

http://jsfiddle.net/kirkas/aFXNC/

+0

작동하지 않으며 아래로가 아니라 오른쪽으로 밀어야합니다. 그래도 감사합니다. http://jsfiddle.net/Draven/D6Xsh/3/ – Draven

+0

사이트가 완전히로드 될 때까지 기다립니다. 오른쪽에있는 슬라이드의 경우 애니메이션 기능 (http://api.jquery.com/animate/)을 살펴 보는 것이 좋습니다. 너비 옵션으로 재생하십시오. – kirkas

+0

도 참조하시기 바랍니다. http://jsfiddle.net/kirkas/SULhT/3/ – kirkas

관련 문제