본문 바로가기
728x90
반응형
slide: horizontal(zIdx) html css .bt-angle { font-size: 6em; position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; color: #fff; opacity: 0.3; transition: all 0.5s; z-index: 2; } .bt-angle:hover { opacity: 1; } .bt-angle.bt-prev { left: 0; } .bt-angle.bt-next { right: 0; } .slide-stage { position: relative; } .slide-stage > .slide-wrap { position: relative; z-index: 1; } .slide-stage > .slide-wrap .. 2023. 4. 10.
slide: basic format js 웹사이트에 자주 쓰이는 슬라이드의 가장 기본적인 코드입니다. /*************** 글로벌 설정 *****************/ var idx// 현재 보이는 슬라이드의 index var zIdx// z-index의 증가값을 저장할 변수 var slideLen// 전체 슬라이드의 갯수 var slideLastIdx// 마지막 슬라이드의 index var aniSpeed// fade animation 속도(ms) var intervalGap// 자동전환 interval 속도(ms) var interval// 자동전환 setInterval을 담는 변수 var $slideStage// $('.slide-stage') var $slideWrap// $('.slide-stage .slide-wrap') .. 2023. 4. 10.
j-Query event mouse: click(), mouseover(), mouseleave() click $('.click-navi > span').on('click', onNaviClick); function onNaviClick() { $(this).parent().find('.sub-wrap').stop().slideToggle(300) } mouseover, mouseleave $('.hover-navi').on('mouseover', onNaviHover); $('.hover-navi').on('mouseleave', onNaviLeave); function onNaviHover() { $(this).find('.sub-wrap').stop().slideDown(300) } function onNaviLeave() { $(this).find('.sub-wrap').stop().slideU.. 2023. 4. 10.
jQuery 메서드 - 종류별 분류 Selector(선택자) $('대상') : css 선택자를 그대로 따른다. children(), find(), parent(), parents(), prev(), next(), siblings() index(), eq() each() : 반복문 Event on() mouse: click(), mouseover(), mouseenter(), mouseleave(), wheel() keyboard: keyup(), keydown(), window: resize(), scroll() form: submit(), reset() Animation show(), hide(), toggle() fadeIn(), fadeOut(), fadeToggle() slideDown(), slideUp(), slideToggle.. 2023. 4. 10.
728x90
반응형

티스토리툴바