웹관련/JavaScript-Jquery45 [자바스크립트] offset 함수를 이용한 원하는 위치로 화면을 이동해보자! 제이쿼리중에 offset() 이라는 함수가 있습니다. offset() 함수는 원하는 선택자의 위치값을 top , left 형식을 반환하여 줍니다. http://www.jquery.com에서 가지고온 예제를 보시면 간단히 이해하실수 있습니다.예문1) Hello 2nd Paragraph 결과값 : left:10, top:53 예문설명 : P태그의 마지막요소를 선택하여 선택된 P태그의 위치값을 offset() 함수로 가져와 left,top 의 위치값을 html() 함수로 찍은것입니다. 그럼 저 offset() 함수를 이용하여 Top, Down 버튼을 만들어 이동시키는 소스를 작성해보았습니다. var topPos = $('#header').offset();var downPos = $('#down').offset.. 2016. 11. 2. [자바스크립트] 마우스 스크롤시 현재 위치값 알아내기 마우스를 드래그 하면서 각 요소들에게 이벤트를 줘야 할경우가 종종있습니다.그러기위해선 현재 위치값을 알아내야하는데 간단하게 알아낼수가 있습니다. 위에 코드를 보시면 scroll 이라는 제이쿼리 이벤트 함수를 이용하여 마우스가 스크롤이 될때마다 스크롤탑이라는 제이쿼리 함수를 이용해서 현재 위치를 알수 있습니다. 스크롤이 될때마다 현재위치를 알았다면 IF문과 결합하여 스크롤이 어느정도 되면 이벤트가 발생이 될수 있게 할수 있습니다. 예문) 아래의 예문의 경우 스크롤을 할때 현재위치값이 탑으로부터 100이 되는 위치에 원하는 선택자에 move라는 클래스를 추가를 하고 100보다 작으면 move라는 클래스를삭제하라는 예문입니다. ^^ 2016. 11. 2. [Jquery] Animate easing 효과 적용하기 jquery.easing.min.js [사용방법] $(document).ready(function() {$("#animate").click(function() {$(".box").animate({marginLeft: '+=100'}, 4000, 'easeOutBounce',function() { console.log("end"); });$(".box").animate({marginLeft: '-=100'}, 4000, 'easeOutBounce');});}); [사용 가능 메서드]linear swing easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQua.. 2016. 9. 28. [자바스크립트] 기초 - 부모창 새로고침하면서 자신의 창 닫기 간단한건데... 막상 필요할땐 생각이 나지 않아 메모처럼 끄적끄적해둡니다.... 2016. 9. 28. [자바스크립트] 기초 - 숫자형 문자형 변환 [간단한 방법]숫자형을 문자형으로 전환은 마지막에 빈문자열을 더한다 ( +'' )문자열을 숫자형으로 전환은 마지막에 1을 곱한다. ( *1 ) [예문] var number=123;var string='123'; console.log(typeof number); // 숫자형console.log(typeof (number+'')); // 빈공백을 더해서 문자형으로 변환console.log(typeof string); // 문자형console.log(typeof (string*1)); // 곱하기1을 하여 숫자형으로 변환 2016. 9. 27. [자바스크립트] 기초 - Split 문자열자르기 [Split] 예문) var aa = "2016-09-27"; var bb = aa.split("-");console.log(bb[0]):console.log(bb[1]):console.log(bb[2]): 결과) 20160927 설명)2016-09-27 이라는 문자열을 aa라는 변수에 저장을 한뒤split 함수를 이용하여 "-" 하이픈을 기준으로 문자열을 짤라서 bb라는 변수에 저장 bb라는 변수는 3개의 문자열이 들어오기때문에 자동으로 배열로 변환되어 저장이 됨하여 bb[0]~bb[2] 까지 배열을 웹 콘솔로 찍었을때 결과값을 확인할수가 있음 2016. 9. 27. [자바스크립트] 기초 - 시간함수 setInterval/clearInterval [setInterval 예제] 1. 1초마다 add라는 함수가 실행되도록 하는 예제 function add(){document.getElementById("txt").innerHTML = cnt;cnt++;} var timer = setInterval(add, 1000);[출처] 트 일정시간마다 함수실행 (setInterval / clearInterval)|작성자 창공 [clearInterval 예제] 2. top_banner 라는곳에 마우스를 오버했을경우 timer로 작동되는 setInterval을 멈추게 하는 예제 $('.top_banner').mouseenter(function(){ clearInterval(timer);}); 2016. 9. 23. [자바스크립트] Input창에 도메인선택시 입력되게 하는 방법 [ 1번째 방법 ] 성명이메일 @ 직접입력 naver.com nate.com hanmail.net gmail.com yahoo.com yahoo.co.kr hotmail.com [2번째 방법] @ 직접입력 naver.com daum.net google.com 2016. 9. 22. [자바스크립트] 레이어팝업 드래그 이벤트 함수!! /* 팝업 드래그 이동 스크립트 */var img_L = 0; var img_T = 0; var targetObj; function getLeft(o){ return parseInt(o.style.left.replace('px', '')); } function getTop(o){ return parseInt(o.style.top.replace('px', '')); } // 이미지 움직이기 function moveDrag(e){ var e_obj = window.event? window.event : e; var dmvx = parseInt(e_obj.clientX + img_L); var dmvy = parseInt(e_obj.clientY + img_T); targetObj.style.left = dm.. 2016. 9. 22. 이전 1 2 3 4 5 다음
