'Excellent Amazon' 홈페이지의 팝업 메뉴 효과를 모방한 jquery 플러그인

'Excellent Amazon' 홈페이지의 팝업 메뉴 효과를 모방한 jquery 플러그인_jquery
WBOY
풀어 주다： 2016-05-16 18:57:10
원래의
914명이 탐색했습니다.
코드 복사 코드는 다음과 같습니다.
/*팝업 메뉴*/ 
// 검 없음 2008-07-03 
//http://regedit.cnblogs.com 
/*매개변수 설명*/ 
//showobj: 표시할 메뉴 ID 
/ /timeout: 지연 시간, 마우스가 메뉴 표시/숨기기를 시작하기 위해 머무르거나 떠난 후 지연되는 시간 
//speed: 메뉴 표시 속도, 숫자가 클수록 표시가 느려지고 기본값은 100 
//호출 예: $("# 버튼").DMenu("#content"); 
jQuery.fn.DMenu=function(showobj,timeout,speed){ 
timeout=timeout?timeout:300 ; 
속도=속도?속도: 100; 
//버튼 객체
var 버튼=$(this) 
//지연 카운터
var 타이머=null; 숨겨진 플로팅 레이어
var hideDiv =$("
") 
//Container 객체
var Container=$(" 
"); 
Container.hide(); 
hideDiv.append(Container); 
//메뉴 객체
var jqShowObj=$(showobj); 
// 메뉴 숨기기
jqShowObj.hide (); 
//메뉴 표시 상태
var display=false; 
//버튼 오프셋 
var offset=button.offset(); /메뉴 영역 높이
var height=jqShowObj.height(); 
//메뉴 영역 너비
var width=jqShowObj.width() 
//버튼 높이
var btnHeight=button .height();//버튼 너비
var btnWidth=button.width() 
//포지셔닝 레이어를 앞쪽으로 배치
$(document.body).prepend (hideDiv)/ /컨테이너에 넣습니다
//Container.append(jqShowObj) 

//****메뉴 표시 방법이 시작됩니다****// 
var showMenu=function( ){ 
//If 메뉴 표시되면 작업 종료 
if (display) 
{ 
return false 
} 
//컨테이너 속성 설정 
컨테이너. css({ 
margin: "0 auto ", 
width:btnWidth "px", 
height:btnHeight "px" 
}) 
//숨겨진 레이어 위치 지정
 hideDiv.css({ 
위치:"absolute", 
top:offset.top "px", 
left:offset.left (btnWidth/2)-(width/2) "px", 
height:height "px", 
 width:width "px" 
}).show() 
//컨테이너에 검은색 테두리 추가
Container.css({ 
border:"1px solid #666666" 
} ; 너비 4, 
불투명도:'100'},speed,function(){ 
//애니메이션이 끝나면 시작// 
//표시 menu
jqShowObj.show(); 
/ /컨테이너에 메뉴 추가
Container.append(jqShowObj) 
//테두리 제거
Container.css({ 
border:" 0px" 
}); 
//표시 상태를 true로 설정 
display=true; 
//마우스 이동
jqShowObj.mouseover(function(){ 
clearTimeout( 타이머); 
}); 
//마우스 이동 열기
jqShowObj.mouseout(function(){ 
hideMenu(); 
})//애니메이션이 종료될 때 end// 
}) 
}; 
 //****디스플레이 메뉴 종료 방법****// 

//****메뉴 방법 시작 숨기기****// 
var hideMenu=function (){ 
clearTimeout(timer); 
//Extension 
timer=setTimeout(function(){ 
//테두리 표시
Container.css({ 
border일 때 메뉴 숨기기 :"1px solid #666666" 
}); 
/ /컨테이너 비우기
Container.empty() 
//컨테이너 축소
Container.animate({ 
너비 :btnWidth,height:btnHeight,marginTop:'0', opacity: '0' 
}, speed, function(){ 
//애니메이션이 끝나면 시작// 
//컨테이너 숨기기 
Container.hide();//위치 지정 레이어 숨기기 
hideDiv.hide() 
//표시 상태를 false로 설정 
display=false; 애니메이션 종료 end// 
}), 
} 
//****메뉴 숨기기 방법 종료****// 

//버튼 마우스 패스 바인딩 event
button.hover(function(e){ 
//지연 표시 메뉴
clearTimeout(timer); 
timer=setTimeout(function(){ 
showMenu(); 
 }, timeout); 
},function(){ 
clearTimeout(timer); 
//마우스가 버튼을 떠나도 메뉴가 계속 표시되면 숨겨집니다. 
( display){ 
timer=setTimeout(function(){ 
hideMenu(); 
},timeout) 
} 
}) 
};


참고: 팝업 메뉴를 차단하는 선택 문제는 플러그인과 관련이 없으므로 여기서는 해결하지 못했습니다. 모든 사람에게 이에 주의하도록 상기시키고 싶습니다. 팝업 메뉴 이용 시 특정 해결 방법을 자동으로 검색하거나 레이아웃을 조정할 수 있습니다. 

파일 패키지 다운로드