IT/JavaScript
[Jquery] 기능 이벤트 reset코드
$(".open").click(function(e) { e.preventDefault();// 이벤트방지코드 });
반응형
IT/JavaScript
::스크롤시 애니메이션효과 라이브러리::AOS. js
AOS(Animate On Scroll Library) 페이지 스크롤을 했을 때 페이드, 회전 확대 등의 다양한 에니메이션 효과를 구현 한 라이브러리 ※ IE9 지원안함 ※ https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io //헤드에 아래코드 추가 //사용할 태그에 data-aos 추가/attribute="애니메이션 이름" //첫번째 방법 AOS //두번째 방법 AOS
IT/JavaScript
[javascript] a태그 선택시 특정위치로 부드럽게 가기
● href에 id를 지정하여 jquery의 animate함수와 offset()함수를 이용하여 그위치로 이동합니다. ● offset()함수는 범위를 지정할 때 자주 사용하는 함수입니다.(특정이름으로 지정, 아이디를 가진 요소의 위치값) ● this.hash를 사용하여 유효한 id값을 반환합니다. ● offset() 사용방법 // 상단을 기준으로 a엘리먼트 요소가 위치한 거리를 절대좌표로 반환 a.offset().top; // 좌측을 기준으로 a엘리먼트 요소가 위치한 거리를 절대좌표로 반환 a.offset().left; // 절대좌표를 기준으로 위에서 200px에 해당하는 좌표로 이동시킴 a.offset({top: 200}); // 절대좌표를 기준으로 좌측에서 200px에 해당하는 좌표로 이동시킴 a...
IT/JavaScript
[javascript] modal 창으로 팝업띄우기
모달과 모달리스의 차이는 모달외의 화면창이 클릭이 되냐 안되냐의 차이이다. ▶ HTML 검색 × 상세검색 ▶ CSS /* modal */ .modal {display: none;position: fixed;z-index: 99999;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);} .modal-cnt {background-color: #fefefe;margin: 10% auto;border: 1px solid #888;width: 50%;height: 498px;border-radius: 5px;} .modal_close {color: #..
IT/JavaScript
[javascript]ie9에서 틀어지는거 잡아주는 js
IT/JavaScript
[javascript] ::jquery:: 제이쿼리(jquery) 이벤트
Mouse Events 기능이름 기능설명 onClick 마우스로 해당 엘리먼트를 클릭함 onDblClick 마우스로 해당 엘리먼트를 더블클릭함 onMouseDown 마우스를 누름(클릭은 마우스를 눌렀다 때는 것으로 구별됨) onMouseMove 마우스가 엘리먼트 위에서 이동함 onMouseOut 마우스가 엘리먼트에서 벗어남 onMouseUp 마우스를 뗌(MouseDown과 반대됨 버튼을 누른 상태에서 떼는 경우) Keyboard Events 기능이름 기능설명 onKeyDown 키보드 버튼을 누르고 있는 경우 (어떤 키인지 읽으려면 함수를 호출하여 event.KeyCode를 참고해야 한다) onKeyPress 키보드 버튼을 눌렀 땐 경우 ( 마우스의 클릭과 유사) onKeyUp 키보드 버튼을 누르고 있다가..
IT/JavaScript
[javascript] 관련사이트바로가기 이동하기버튼
셀렉트박스 선택 후 이동하기 버튼 눌렸을 때 이동하는 js #html function open_link(id){ if(id !=''){ if(document.getElementById(id).value !="" && document.getElementById(id).value != null){ //id가 가진 value값이 비어있지않고 null이아닐때 var openNewWindow = window.open("about:blank"); //window.open(url, name, specs, replace); openNewWindow.location.href=document.getElementById(id).value; } return false; } } #js 관련사이트 관련사이트 청와대 광화문 1번가..
IT/JavaScript
[javacsript]top으로 이동
#jquery 코드 //top 버튼 $(document).ready(function(){ $("#move_top").click(function() { $('html, body').animate({ scrollTop : 0 }, 400); return false; }); }); #html 코드 #css 코드 .main{position:relative;} .top_btn{position: absolute;bottom: 20px;right: 19px;} //움직일때 고정하고싶으면 position: fixed;
반응형
