본문 바로가기

Front/JQuery10

[JQuery] 자동 슬라이드/무한 슬라이드 배너 만들기(외부 소스X) jsp(HTML) mtSlideDiv는 몇 개가 늘어나든 상관없다. ❮ ❯ javascript(jQuery) CSS /* Slideshow container */ .slideshow-container { max-width: 1440px; position: relative; margin: auto; margin-top: 120px; } /* effect */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes f.. 2021. 7. 29.
[네이버지도API/AJAX] 마커 여러 개 띄우기/디비에 있는 데이터 지도에 표시하기/지도를 움직일 때마다 중심 좌표 얻기/현재 화면에 보이는 마커만 표시하기 사실 원하는 메소드는 네이버 지도 API 홈페이지에서 찾는 게 제일 효율적입니다. https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Marker.html NAVER Maps API v3 NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다. navermaps.github.io javascript // x,y = 지도를 오픈할 중심 좌표 값 function storeOpen(x, y) { var MARKER_ICON_URL = 'resources/img/이미지아이콘경로.png'; // 파라미터로 받은 좌표 값으로 지도 생성 var map = new naver.maps.Map('map', { cen.. 2021. 7. 15.
[네이버지도API] 해당 지역에 마커 찍기, 마커 아이콘 변경 이 포스트는 ClientID 발급 이후의 과정을 담고 있는 포스트입니다. 예제를 보러오신 분은 구분선 아래 소스를 봐주세요. 우선 네이버 클라우드 플랫폼에 가입해야합니다. 가입 절차는 아래 주소를 참고하세요. https://winteri-i.tistory.com/18 [Web/ 네이버 지도 API] 네이버 지도 API 사용방법 - Naver map/ Naver map api 애증의 네이버 지도 API... Swift로 프로젝트 할 때 사용해 본 경험이 있는데, Swift에 대한 자료가 많지 않다보니 많이 헤맸던 기억이 난다. 겨우겨우 마커 표시와, 마커 색 바꾸기, 처음 앱 실행시 winteri-i.tistory.com 어플리케이션 등록 화면이 찾기 어렵다면 아래 주소를 참고하세요. 어플리케이션 서비스는.. 2021. 7. 12.
[JQuery-3.6.0] 효과-애니메이션(Animation) 처리 효과 관련 메서드 * 콜백함수 : 효과가 완료되면 실행되는 함수. 생략 가능. - hide() : 요소를 숨기는 기능. 형식) $("요소선택").show("효과속도(ms)", 콜백함수) - show() : 숨겨져있던 요소를 노출시키는 기능. 형식) $("요소선택").show("효과속도(ms)", 콜백함수) - toggle() : 선택한 요소가 보이면 숨기고, 숨겨져 있으면 보이게 하는 기능. 형식) $("요소선택").toggle("효과속도(ms)", 콜백함수) - fadeIn() : 숨겨져있던 요소가 점점 투명해 지면서 노출이 되는 기능. 형식) $("요소선택").fadeIn("효과속도(ms)", 콜백함수) - fadeOut() : 노출이 되어 있던 요소가 점점 사라지는(불투명) 기능. 형식) $("요소.. 2021. 4. 29.
[JQuery-3.6.0] 이벤트(Event) 처리 이벤트 종류 1. 마우스 이벤트 : 사용자가 마우스 버튼을 눌렀을 때 발생하는 이벤트. 2. 키보드 이벤트 : 사용자가 키보드를 눌렀을 때 발생하는 이벤트. 이때 눌린 키에 대한 정보가 이벤트에 담김. 3. 태그 요소 고유 이벤트 : 요소마다 발생하는 고유의 이벤트. 4. 사용자 정의 이벤트 : 개발자가 직접 만들어 사용하는 이벤트. 이벤트 형식) $("요소선택").on("이벤트 이름", 이벤트리스너) 이벤트 목록 blur, change, load, unload, resize, scroll, select, submit, click, dblclick mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, focus, keydo.. 2021. 4. 29.
[JQuery-3.6.0] 요소(속성) 편집 메서드 요소 편집 메서드 - 선택한 요소를 복제하거나 새 요소를 생성하는 메서드. - 복제하거나 새로 생성한 요소를 의도한 위치로 삽입하고 선택한 요소를 삭제하는 기능. - before() : 선택한 요소 이전 위치에 새 요소를 추가하는 메서드. 형식) $("요소선택").before("새 요소"); - after() : 선택한 요소 다음 위치에 새 요소를 추가하는 메서드. 형식) $("요소선택").after("새 요소"); - append() : 선택한 요소의 마지막 위치에 새 요소를 추가하는 메서드. 형식) $("요소선택").append("새 요소"); - appendTo() : 선택한 요소의 마지막 위치에 새 요소를 추가하는 메서드. 형식) $("새 요소").appendTo("요소선택"); - prepend.. 2021. 4. 28.

티스토리툴바