jQuery_jquery로 구현된 플래시 같은 메뉴 효과 코드

먼저 효과를 살펴보겠습니다: http://demo.jb51.net/js/jquery_flash/demo.htm

다음 메뉴도 위와 동일한 구현 원리를 갖고 있기 때문입니다. 로고, 단순화를 위해 여기서는 원칙을 설명하기 위해 로고 부분의 코드만 사용합니다.

HTML 코드:

코드 복사 코드는 다음과 같습니다.

로고 유형

CSS 코드:

코드 복사 코드는 다음과 같습니다.

a#logotype{ 배경: url(logotype .jpg) 왼쪽 상단; 디스플레이: 블록; 높이: 70px; 너비: 119px; :none} a#logotype .hover { background: url(logotype.jpg) no -repeat left; 위치: 절대: 0; 너비: 119px; 로고타입{
배경: url(logotype.jpg) 왼쪽 상단 ;
디스플레이: 블록
위치: 상대
폭: 119px; }
a#logotype 범위{display:none}
a# logotype .hover {
배경: url(logotype.jpg) 왼쪽 하단 반복 없음;
디스플레이: 블록
위치: 절대;
왼쪽: 0;
높이: 70px;
}



여기에 hover 클래스가 있는데, 이는 html에는 없습니다. 걱정하지 마세요. 이것은 뒤에 있습니다. js에서 사용됩니다.

JS 코드:




코드 복사

코드는 다음과 같습니다. $(function () { var fadeSpeed ​​​​= ($.browser.safari ? 600 : 450); $('#logotype').append('' ); $(' .hover').css('opacity', 0) $('.hover').parent().hover(function() { $('.hover', this).stop() .animate({ ' opacity': 1 }, fadeSpeed) }, function() { $('.hover', this).stop().animate({ 'opacity': 0 }, fadeSpeed) }); ; $(function( ) { var fadeSpeed ​​​​= ($.browser.safari ? 600 : 450);

$('#logotype').append('' );

$('.hover').css('불투명도', 0)
$('.hover').parent().hover(function() {
$('.hover', this).stop().animate({
'opacity': 1
},
fadeSpeed)
},
function() {
$('.hover', this).stop().animate({
'opacity': 0
},
fadeSpeed)
});



이 JS는 이 효과의 구현 원리를 명확하게 설명합니다. 먼저 링크에 클래스 호버를 사용하여 범위를 만듭니다(이 범위는 링크에 마우스를 놓았을 때 실제 효과입니다). ), 투명도를 0으로 설정하고 마우스를 연결 위로 이동하면 범위의 투명도가 점차적으로 1로 조정되어 위의 범위가 a의 기본 효과를 덮어쓰게 되어 애니메이션 효과를 얻을 수 있습니다.

jQuery를 기반으로 한 플래시 같은 메뉴 효과