li을 자바 스크립트로 밀어넣고 (어제처럼)
&
제이쿼리+CSS로 애니메이션 주기! (자바스크립트로 하면 비효율적)
1. 네비게이션 단독 페이지 안에서 책갈피 기능
1-1. "페이지가 열리자마자 실행하라"
제이쿼리 $(document).ready(function( ){ } : 여러개 세팅 가능
자바스크립트 window.onload.function( ){ } 와 같음 (한번만 사용 가능)
1-2. ".depth1의 모든 a중, 클릭된 a"
".depth1의 모든 a중" 하나 클릭 ↓그 클릭한 a 에 funcion을 수행하라
$(".depth1 a") .click ( function( e ){ } ); // 매개변수 e = click된 이벤트를 의미함
1-3. preventDefault
- a태그의 고유의 기능(=링크이동) 막는다
- 고유의 기능을 가진 태그 : submit / input / button / select / a 등
$(".depth1 a") .click (function( e ){
e.preventDefault();
//e(=클릭된 a태그)의 링크 이동을 막는다
}1-4-1. $( '~~' ) = ~~라는 객체를 찾아와!
^ 맨앞
$ 맨끝
설명
'img[src$=".png"]' // "모든 png 이미지" (string) ↓↓ $()안에 삽입 ↓↓
$( 'img[src$=".png"]' ) // "모든 png 이미지" 라는 객체를 찾아와! (element)
getElementById와 비슷ex)
$(this) // "this 객체를 찾아와!"
$('body, html') // "~~ 객체를 찾아와!"
$( 'img[src$=".png"]' ) // "모든 png 이미지들"
$( '[src$="noimg.png"]' )// "모든 noimg.png 이미지들"
$( '[href^="http"]' ) // "http로 시작하는 링크값을 가진 모든 태그들"
$( "[type=button]" ) == $('button')
$( 'a' ).attr('href') //
"'a태그' 속성에 접근해서 -> 'href'값 가져와"$( 'a' ).attr('href', '#none') //
"'a태그' 속성에 접근해서 -> 'href'를 #none으로 바꿔라"$( 'a.navi' ).attr('href') //
"'a태그 중 클래스가 navi인 태그' 속성에 접근해서 -> 'href'값 가져와"$('a.navi').attr('href', $('a.gnb').attr('href')) //
"'a태그 중 클래스가 navi인 태그' 속성에 접근해서 -> 'href'값 가져와서"
↓
↓
"'a태그 중 클래스가 gnb인 태그'의 속성값이 'href'인 놈들로" 바꿔넣어라$( 'img:not(.logo)' ).attr( 'scr ', '/img/noimg.jpg' ) //
모든 img 중, 클래스 logo가 아닌 놈들의 src 값을
↓
↓
'/img/noimg.jpg'로 바꿔넣어라 이제 우리의 코드를 보자
$(this).attr('href') // "이 객체의 속성이 href인 모든 놈들(=a태그)" ↓↓ $()안에 삽입 ↓↓
$( $(this).attr('href') ) // "이 객체의 속성이 href인 모든 (a태그)" 섹션을 찾아와!
// id가 sec1인 섹션(=element)즉, 여기까지 요약하자면 다음과 같은 명령임
".depth1의 모든 a중" 클릭된 a에게 아래와 같은 명령을 실행해라( ){
- a태그의 고유한 기능 먼저 차단하고 (이동 중지),
- "이 (클릭된) 객체의 속성이 href인 모든" 섹션을 찾아와! (=id가 sec1인 섹션)
}
1-4-2. offset : 위치를 지정하는 함수
- top, left(=컨텐츠의 시작점) 밖에 없다! (bottom 無! 스크롤 마지막이 어딘지 다들 ≠ )
- offset( ).top (=전체 페이지에서 'top'의 위치, 숫자값을 잡아내라)
$(".depth1 a").click(function(e){
e.preventDefault();
var targetPos = $($(this).attr('href')).offset().top;
// 전체 **텍스트**페이지에서 'top'의 위치, 실제 숫자로 잡아내라
});여기까지 요약하자면 다음과 같은 명령임
".depth1의 모든 a중" 클릭된 a에게 아래와 같은 명령을 실행해라( ){
- a태그의 고유한 기능 먼저 차단하고 (이동 중지),
- 전체 페이지에서 "이 객체의 속성이 href인 모든 섹션"의 top 위치 숫자값을
- targetPos 변수에 집어넣어라.
}
1-5. 제이쿼리 책갈피 x 애니메이션
ex)
$('#pop').animate({ 'top': -50 }, 400 )
// #pop 객체의 top 값을 -50으로 지정, 0.4초간 스르륵~ 이동해라이제 우리의 코드를 보자
$('body, html').animate({'scrollTop':targetPos});
// $('body, html') = $(this/클릭한 a 태그의 속성이 'href'인 모든 것) = $(#sec1)"body 혹은 html이 가진 ( {스크롤탑 위치를 'targetPos(숫자값)'로} ) animation 시켜라!"
다시 말해
"화면 애니메이션 처리 스크롤 상단 위치에 해당 위치값을 넣어서
→ 마치 그 섹션한테 유유히 간 것처럼 보이도록"
이때, e.preventDefault( ) 후다닥 내려가지 마!
.animate 애니메이션 하면서 부드럽게 이동해
$(".depth1 a").click(function(e){
e.preventDefault();
var targetPos = $($(this).attr('href')).offset().top;
$('body, html').animate({'scrollTop':targetPos});
// body 혹은 html이 가진 ({ '스크롤탑의 위치'를 = 'targetPos(숫자)'로 }) animation 시켜라
});여기까지 요약하자면 다음과 같은 명령임
".depth1의 모든 a중" 클릭된 a에게 아래와 같은 명령을 실행해라( ){
- a태그의 고유한 기능 먼저 차단하고 (이동 중지),
- 전체 페이지에서 "이 객체의 속성이 href인 모든 섹션"의 top 위치 숫자값을
- targetPos 변수에 집어넣어라.
- 스크롤탑 위치를 = 'targetPos'로 지정하고, 클릭 시 0.4초간 부드럽게 이동하라
}
