coding (66) 썸네일형 리스트형 jQuery - banner 만들기_2 (function($){ // jQuery // 1. indicator 클릭시 배너이동 // 2. 다음/이전버튼 클릭시 배너이동 // 3. 배너가 바뀌면 숫자도 변하게 // 4. ul/li 갯수/위치조정 // 5. 일정시간이 지나면 자동으로 이동 -> setInterval // 6. 마우스 올리면 자동으로 이동하는 기능 일시정지 -> clearInterval // 7. 마우스 벗어나면 다시 자동으로 이동 // 8. indicator 선택된 형태 체크 (addClass -> act) // ================== // 9. 광고내용갯수에 맞게 indicator 생성 // 10. 필요에 따라, indicator/button/전체갯수 및 현재갯수 표현여부를 체크 // 11. 재생 버튼, 일시정지 버튼.. jQuery - banner와 indicator를 이용해 만들기 // js_017_banner_03_indicator.js (function($){ // 1. 인디케이터 클릭시 해당하는 광고내용이 움직이게 // 101. 인디케이터를 어느것을 클릭했는지? // 102. 클릭한 인디케이터의 위치에 따른 광고의 위치? // 103. 선택한 순서에 맞는 인티케이터에 act를 담기 var banner = $('.banner_01'); var indicator = banner.find('.indicator'); var indiUl = indicator.find('ul'); var indiLi = indiUl.find('li'); var indiLink = indiLi.find('a'); var viewArea = banner.find('.view_area'); var viewU.. jQuery - banner 요소 추가 // js_015_banner_01.js (function($){ // jQuery // 해야할 일 작성 // 1. 다음버튼을 클릭하면 // 2. list_01 -> list_02 로 나타나게 한다. // 2-1 조건 -> .product의 가로값만큼 이동할것 - 가로값을 파악하는것은? // - 가로값 파악하는 것 padding x , border x , 이 아닌 순수한 가로값 : width() // 3. 클릭마다 가로값 크기만큼 이동 -> 2번 이동 강화 -> 1씩 값이 커지게 (-옵션) // 4. 마지막 요소가 보이면 멈춤/처음 // 4-1 보여주는 리스트의 갯수파악 var banner_01 = $('.banner_01'); var ban_01_btn = banner_01.children('.btn'.. jQuery - gallery // 1. 반복문을 이용하여 big_image에 li를 생성 // 2. 이미지를 담는 객체를 생성하여 담기 // 3. 큰 영역에 첫번째 이미지를 담기 // ============================================== // 1. 작은 이미지를 마우스 올릴경우 다음과 같은 기능을 수행 // 2. 작은 이미지에 들어있는 이미지와 같은형태의 큰이미지의 주소를 찾아 // bigUrl + galleryData[i].bigImg // 3. 큰 영역에 배경이미지로 배치 // 4. 이때 작은이미지가 어떤 것이 선택되었는지 주목성이 있도록 처리 // 5. 주목성처리 : class="act" 삽입 // // 추가기능1 : 작은이미지를 선택할때, 다른영역에 있는 형태는 act해제 // // 추가기능2 .. jQuery - 06 mouseclick_xy click은 마우스 눌렀다 띄는 행위전체, 왼버튼으로 인식되어있으며 button값은 0 mousedown - 마우스를 누른 키를 찾아내기 이벤트.button , 이벤트.buttons 0 -> 왼버튼, 1 -> 휠, 2 -> 오른버튼 mouseup 마우스 누른버튼 띌때 mousemove 마우스가 움직임을 가질때 마우스 누른상태로 움직임을 체크하려면 여러 옵션을 설정해서 사용해야 한다. touchstart 터치가능한 기기를 누를때 touchend 터치가능한 기기를 띌때 touchmove 터치 중 손가락을 움직일때 client : 브라우저에서 보이는부분만큼을 왼쪽을 0, 상단을 0으로 무조건 본다. offset : 이벤트 발생영역 -> 터치기반에는 offsetX, offsetY 존재하지 않는다. page : .. 0629 / jQuery - delete (삭제코드) (function ($) { var h2 = $ ('h2'); var p = $ ('p'); var hText = '내용상의 요소 및 내용을 삭제하는 방법' ; h2.text (htext); var set = $('.set'); set.children('a').attr({'href':'http://naver.com', 'target' : '_blank' }); set.children('button').remove(); var linkGoogle = ' 구글 '; set.append(linkGoogle); set.children('a').eq(0),removeAttr('target'); p.eq(0).empty(); }) (jQuery); 0622 / jQuery - tab menu * jquery - tab menu 순서를 지정하고 실행 ! li : 클릭 - 해당하는 순서에 맞는 .content 요소가 나타나기 li 클릭 시 기존에 보이는 .content 는 사라지고, 내가 클릭한 순서에 맞는 .content 요소가 나타나게 만들기. li 클릭이 아니라, 내부의 버튼을 클릭 버튼의 부모인 li 가 몇번째인가? 확인 click (선택된 상태) / focus / hover 각각의 상황에 맞게 표현처리방법 선택으로 인해 내용이 나타나면, 먼저 읽어주어야 하는 표현은 무엇이 있는가? jQuery : 애니메이션 기능이 들어있는 메소드는 'callback' 기능이 있다. callback 기능 : 앞의 함수/변수가 실행하면 바로 뒤의 함수가 실행되게 하는 기능. 0622 / jQuery - accordion menu * accordion menu (function($) { // 변수 지정 var accordion = $('.accordion); var accDl = accordion.find('dl'); var accDt = accDl.children('dt'); var accDd = accDl.children('dd'); // 기능 구현 1 accDt.on( 'click', function( ) { var thisI = $(this); var viewDd = thisI.next(accDd); var viewDdCheck = viewDd.css('display'); // block , none viewDd.siblings('dd').slideUp( ); // if(viewDdCheck === 'none' ) { vi.. 이전 1 2 3 4 5 ··· 9 다음