I am passionate about web application development, technology and design. I have a hardwired desire to be better, an instinct for good design, a strong ambition to make a difference on the web.
$(document).ready(function(){
// ****** 메뉴 ****** //
$('.navi>li').mouseover(function(){
$(this).find('.subMenu').stop().slideDown(500);
}).mouseout(function(){
$(this).find('.subMenu').stop().slideUp(500);
});
/* 메소드 설명
mouseover() 메소드는 선택한 요소의 영역에서 마우스를 올렸을 때 이벤트가 발생됩니다.
또는 선택한 요소에 mouseover() 이벤트를 강제로 발생시킬 때 사용합니다.
기본형 : mouseover()
$("요소선택").mouseover(function(){...});
선택한 요소의 영역에 마우스를 올렸을 때 실행문을 실행합니다.
$("요소선택").mouseover()
선택한 요소에 강제로 mouseover이벤트를 발생시킵니다.
mouseout() 메소드는 선택한 요소의 영역에서 마우스가 벗어났을 때 이벤트가 발생합니다.
이때 하위 영향을 받습니다.
또는 선택한 요소에 mouseout() 이벤트를 강제로 발생시킬 때 사용합니다.
기본형 : mouseout()
$("요소선택").mouseout(function(){...});
선택한 요소의 영역에서 마우스가 벗어났을 때 실행문을 실행합니다.
$("요소선택").mouseout()
선택한 요소에 강제로 mouseout 이벤트를 발생시킵니다.
stop() : 선택한 요소에 현재 실행중인 효과 또는 애니메이션이 적용된 효과를 모두 정지시킵니다. 정지시킵니다.
기본형 : $("요소선택").stop()
*/
// ****** 이미지 슬라이드 ****** //
//[1] 변수 선언 및 초기화
const imgs = 2;
let now = 0;
//[2] 이미지슬라이드의 첫번째 이미지의 형제 들을 모두 left -3000px 적용
$(".imgSlide>a").eq(0).siblings().animate({left:"-3000px"});
//[3] setInterval 메소드 3초 간격으로 실행
setInterval(function(){
now = now==imgs ? 0 : now+=1;
$(".imgSlide>a").eq(now-1).animate({left:"-3000px"});
$(".imgSlide>a").eq(now).animate({left:"0"});
},3000);
/* 메소드 설명
eq() : 선택한 요소의 특정 인덱스 번호 요소 반환 (element queue 약자)
사용법 $(“요소선택).eq(index)
siblings() : 선택한 요소의 모든 형제 요소 반환
animate() : 선택한 요소에 다양한 동작 효과 적용
사용법 $("요소 선택").animate({①애니메이션 속성}, ②효과 속도, ③콜백함수)
setInterval() : 일정한 시간 간격으로 스크립트 실행문을 반복하여 실행시킬 때
사용법 setInterval({실행문}, 시간 간격 )
시간 간격 -> 1/1000초 단위인 밀리초(mic) 단위로 작성. ex) 3초 => 3000
*/
// ****** Modal 팝업 ****** //
$(".notice li:first").click(function(){
$("#modalWrap").addClass("active");
});
$(".btn").click(function(){
$("#modalWrap").removeClass("active");
});
/* 메소드 설명
addClass : 선택한 요소에 인수로 전달받은 클래스를 추가합니다.
기본형 : addClass("클래스명")
ex) addClass("active")
removeClass : 선택한 요소에 인수로 전달받은 클래스를 삭제합니다.
기본형 : removeClass("클래스명")
ex) removeClass("active")
*/
});