HTML/Javascript 기초 (53) 썸네일형 리스트형 [Javascript] 이미지 드래그 하기(mousedown, mousemove, mouseup) 이미지를 드래그 해보는 프로그램을 작성해보자. mousedown() 마우스 왼쪽을 클릭하고 떼지 않은 상태 mousemove() 마우스를 움직이는 상태 mouseup() 마우스를 클릭 후 떼어 클릭버튼이 올라온 상태 마우스를 클릭하였을 때 자연스럽게 하기 위해 그림 가운데에 마우스가 위치하도록 설정하였다. 그림들의 초기 설정은 랜덤으로해서 무작위로 배치한다. 사실 움직임이 자연스럽지는 않다. 정말로 드래그를 구현한 것이라 아니라 마우스 클릭 상태에 따라 구현한 것으로 중간에 버벅이는 것을 볼 수 있다. [Javascript] 지정한 위치로 물고기 이동시키기 태그 안에 마우스로 클릭한 지점으로 물고기를 이동시켜보자. 클릭한 위치를 물고기에 적용시켜 css로 위치를 바꿔준다. 여기에 클릭한 위치 값 출력 [Javascript] 웹페이지에서 마우스 위치 표시하기 웹페이지에서 마우스의 좌표를 표시해보자 좌표의 기분은 왼쪽 상단을 기준으로 한다. 여기에 클릭한 위치 값 출력 [Javascript] 스크롤 이동으로 위치 표시하기 스크롤 위치 구하기 window.pageXOffset window.pageYOffset - 윈도우 영역에서 스크롤된 위치 값을 구할 수 있다. 스크롤 위치 설정하기 window.scrollTo(x, y) window.scrollBy(x, y) - scrollTo() – 윈도우 영역에서 스크롤 위치를 x, y위치로 움직인다. - scrollBy() – 현재 스크롤 위치에서 x, y만큼 움직인다. 스크롤 이벤트 처리하기 $(window).on(“scroll”, function(){ }); - 스크롤이 될 때마다 scroll 이벤트 발생한다. 스크롤 정보 출력 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 .. [Javascript] 배너 이동하기 버튼 클릭으로 배너를 이동해보자. 배너를 여러개를 한 줄로 나열한 다음 전체를 움직여서 제한된 공간에 배너를 보여주는 코딩을 해보자. 이전 다음 [Javascript] 윈도우 창 크기 변경하고 이동하기 window 객체에서 제공하는 resizeTo() 메소드를 이용하여 윈도우 크기를 변경한다. window.resizeTo(width,height) : 크기 변경 단! 이 메소드는 window.open() 메소드에 의해 만들어진 윈도우만 변경할 수 있다. 윈도우의 크기가 변경되면 Window 객체에서 resize 이벤트가 발생된다. $(window).on(“resize”, function(e){ }); 윈도우 위치 구하기 window.screenLeft window.screenTop 윈도우 위치 설정하기 window.moveTo(dx, dy) window.moveBy(dx, dy) moveTo() – 화면에서 윈도우를 dx, dy 위치로 이동시킴. moveBy() – 현재 윈도우 위치에서 dx, dy만큼 .. [Javascript] 스크롤 위치 구하기 스크롤 위치 구하기 $대상.scrollLeft(); $대상.scrollTop(); 스크롤 위치 설정하기 $대상.scrollLeft(위치값); $대상.scrollTop(위치값); setInterval 함수를 이용하여 스크롤을 이동시켜보자. 확인 이동 여기에 스크롤 정보가 출력될 거에요. [Javascript] 윈도우 창 크기 구하기 윈도우 웹 브라우저로 실행된 창의 크기를 구할 수 있다. 웹 브라우저의 메뉴바와 툴바, 스크롤바 등이 전혀 포함되지 않은 윈도우 내부 영역 크기이다. window.innerWidth window.innerHeight 기본크기 + 메뉴바 + 툴바 영역 포함된 크기 $(window).width() $(window).height() 기본크기 + 메뉴바 + 툴바 + 스크롤바 영역이 포함된 크기 window.outerWidth window.outerHeight 스크린의 크기 출력 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 .. 이전 1 2 3 4 5 ··· 7 다음
