jquery 화염 등 효과 탐색 메뉴

jQuery - 화염 등 효과 탐색 메뉴
by zhangxinxu from http://www.zhangxinxu.com 본문 주소: http://www.zhangxinxu.com/wordpress/?p=450
효 과 는 마우스 가 특정한 네 비게 이 션 옵션 을 지나 갈 때 뒤의 배경 그림 (위의 그림 '크리스마스' 후 원 각 배경) 은 이 네 비게 이 션 옵션 으로 탄력 적 으로 느 려 집 니 다. 클릭 동작 이 일어나 지 않 으 면 마 우 스 를 옮 긴 후 배경 그림 은 다시 원래 의 위치 로 돌아 갑 니 다.
당신 은 여 기 를 세 게 클릭 할 수 있 습 니 다: demo 효과 페이지
사용 설명: 1. 링크 가 필요 한 파일 을 호출 할 파일 은 jQuery 라 이브 러 리 (1.2 이상 버 전), jQuery 느 린 플러그 인 (jquery. easing. min. js), 화염 등 효과 플러그 인 (jquery. lavalamp. min. js) 및 ul li 목록 의 스타일 파일 입 니 다.예 를 들 어 본 demo 인 스 턴 스 페이지 링크 는 다음 과 같 습 니 다.
2. HTML 코드 의 작성 방법 은 jQuery 코드 를 보면 HTML 은 li 목록 만 지원 하고 순서 가 없 거나 서열 표 (ol 또는 ul) 가 있 습 니 다.예 를 들 어 다음 예제:

<ul class="lava_lamp">

       <li class="current"><a href="#zhangxinxu">   </a></li>

       <li><a href="#zhangxinxu">  </a></li>

       <li><a href="#zhangxinxu">  </a></li>

       <li><a href="#zhangxinxu">《    》</a></li>

       <li><a href="#zhangxinxu">       </a></li>

</ul>

3. 해당 CSS 표기 법 CSS 의 표기 법 은 평소 무질서 목록 을 사용 하여 네 비게 이 션 바 를 쓰 는 것 과 큰 차이 가 없다. 가장 내부 에 있 는 a 라벨 은 position 를 relative 로 설정 하고 상대 적 으로 높 은 등급 (z - index) 을 지정 해 야 하 는데 이것 은 디 스 플레이 원리 (잠시 후 토론) 에 의 해 결 정 된 것 이다.그리고 class 가 back 인 li 라벨 을 추가 해 야 하 는 스타일 입 니 다. 이 스타일 은 뒤에서 이동 하 는 배경 그림 (또는 배경 색 이나 테두리 등) 스타일 입 니 다.예 를 들 어 위의 HTML CSS 는 다음 과 같다.

/*   */

. lava_lamp{position:relative; width:421px; height:29px; padding:15px; border:1px solid silver;}

. lava_lamp li{float:left;}

. lava_lamp li a{float:left; font-weight:bold; color:#333333; font-size:14px; top:8px; margin:auto 10px; text-decoration:none; position:relative; z-index:3;}

. lava_lamp li a:hover{text-decoration:none; color:#333333;}

. lava_lamp li.back{height:30px; border-bottom:3px solid #34538b; position:absolute; z-index:2;}

4. js 부분의 코드 js 용법 은 매우 간단 하 다.$(function () {});안에 $("선택 기") 를 쓰 십시오. lavaLamp ();사실 이면 돼.그러나 일반적으로 인 자 를 설정 합 니 다.아니면 위의 예:

$(". lava_lamp").lavaLamp({

	fx: "backout", //    

	speed: 700, //    

	click: function(event, menuItem) {

		return false; //      

	}

});

여기 에는 세 가지 인자 가 있 습 니 다. fx, speed, click 은 각각 느 린 동작 유형, 느 린 실행 시간, 그리고 메뉴 를 클릭 한 후에 발생 하 는 이벤트 입 니 다.귀하 의 요구 에 따라 상응하는 수정 을 할 수 있 습 니 다. 예 를 들 어 fx: "bounceout", speed: 1000.
5. 미리 보 기 를 완성 하면 일반적으로 미리 보 기 를 통 해 효 과 를 볼 수 있 습 니 다.IE6 에서 배경 그림 의 이동 이 원활 하지 않 은 것 을 발견 하면 js 에 document. execCommand ("Background ImageCache", false, true) 를 추가 해 보십시오.
원리 약술: jQuery 코드 가 어떤 일 을 했 는 지 설명 합 니 다. jQuery 가 먼저 하 는 일 은 ul 목록 에 class 를 back 으로 하 는 li 라벨 을 추가 하 는 것 입 니 다. CSS 에서 li. back 은 절대 위치 (position: absolute, z - index: 2;) 로 설정 되 었 고 네 비게 이 션 에서 a 라벨 (position: relative, z - index: 3;) 의 등급 보다 작 습 니 다. 모든 것 은 배경 그림 이 포함 되 어 있 습 니 다.(또는 배경 색 이나 테두리) 의 li. back 탭 은 텍스트 아래 (a 탭 아래) 에 표 시 됩 니 다.
jQuery 가 하 는 또 다른 일 은 li. back 이라는 탭 의 너비 와 left 의 위 치 를 제어 하 는 것 입 니 다. 즉, 애니메이션 효과 입 니 다. easing 느 린 플러그 인 을 결합 해 야 합 니 다. 단순 한 이동 이 라면 easing 플러그 인 은 필요 하지 않 습 니 다. animate 함수 로 이 루어 집 니 다.

당신 은 여 기 를 세 게 클릭 할 수 있 습 니 다: 원본 파일 패키지 다운로드 (zip 24.3k) (본인 블 로그 원 파일 에서 도 다운로드 할 수 있 습 니 다)
참고: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/
본문 주소: 장 흠 욱 - 흠 공간 - 흠 생활