본문 바로가기
728x90
300x250
SMALL

javaScript/jQuery153

클릭하면 이미지가 사라지고 나타나는 애니메이션 효과 show, hide show, hide $대상.show() $대상.show([duration] [,complete]) $대상.show([duration] [,easing] [,complete]) $대상.show([option]) $대상.hide() $대상.hide([duration] [,complete]) $대상.hide([duration] [,easing] [,complete]) $대상.hide([option]) duration : 효과가 지속될 시간 값 easing : 이징함수명 (애니메이션의 움직임의 변화를 구현하는 함수) complete : 효과가 완료됐을 때 호출할 콜백 함수 option : duration, easing, complete매개변수를 하나의 객체로 묶어서 간결하게 매개변수를 전달 할수 있고 기본적인매.. 2023. 5. 17.
드래그 앤 드랍 최종버전 지난 포스팅까지 작업했던 드래그 앤 드랍 이제 거의 완성 한 것 같다. 다 끝난것 같지만 여기에는 치명적인 문제점이 있다. 확인을 위해 mousemove 이벤트에 다음과 같이 콘솔을 찍어보고 실행시켜 콘솔창을 확인해보면 $(document).on("mousemove", function(e){ console.log("mousemove"); }) 이렇게 mousemove 이벤트는 마우스를 대상에 클릭하지 않을때도 실행되는걸 확인할 수 있다. 이 문제를 해결하려면 mousemove와 mouseup 이벤트를 이미지가 드래그되기 시작할때 이벤트 리스너를 등록하고 이미지 드래그가 종료되면 등록한 이벤트 리스너를 삭제하면 된다. 최종버전의 콘솔창을 확인하면 대싱이미지를 클릭한 후에 드래그 했을 경우에만 mousemo.. 2023. 5. 15.
클릭한 이미지 최상단으로 지난 포스팅에서 했던 드래그 앤 드랍 예제를 보면 문제점이 또 있는데 겹쳐진 이미지를 클릭했을때 클릭한 이미지가 최상단으로 오지 않는 문제가 있다. 이 문제를 해결하기 위해 이미지를 클릭했을때 클릭한 이미지가 최상단으로 오는 코드를 추가해보자 zIndex 변수를 만들고 클릭할때마다 클릭한 대상에 z-index를 +1해서 대입해준다. var zIndex=100; $imgs.on("mousedown",function(e){ zIndex++; $dragTarget.css({ "z-index":zIndex }) }) 2023. 5. 14.
마우스 클릭 위치 에러 바로 잡기 (클릭 이미지 기준 위치) 지난 포스팅에서 작성한 드래그 앤 드랍 기능에 문제점이 있으니 클릭한 지점이 아닌 좌측 상단 으로 이동하는 문제가 발생 마우스 클릭 위치 에러 바로 잡기위해서는 이미지에서 드래그 시작 위치 점의 좌표값을 빼주면 된다. 그럼 이미지에서 드래그 위치 좌표값을 어떻게 구할 수 있을까 $imgs.on("mousedown",function(e){ var offset = $dragTarget.offset();//대상 이미지 좌표값 저장 startX = e.pageX-offset.left; startY = e.pageY-offset.top; }) 이미지를 클릭했을때 클릭한 대상의 좌표값을 저장하고 문서에서의 클릭한 지점의 값을 빼준다. 그러면 결국 이미지 안에서 클릭한 지점의 좌표값만 남게 된다. $(document.. 2023. 5. 13.
728x90
반응형
LIST

티스토리툴바