>  기사  >  웹 프론트엔드  >  Jquery는 마우스 드래그 효과 구현 원리와 code_jquery를 작성합니다.

Jquery는 마우스 드래그 효과 구현 원리와 code_jquery를 작성합니다.

WBOY
WBOY원래의
2016-05-16 17:45:53955검색

최근 프로젝트에서는 마우스 드래그 레이어 효과를 만들고 싶었기 때문에 Jquery를 사용하여 수동으로 만들었습니다. 모든 사람과 공유하기 위해 보냈고, 영웅이 내 아이디어와 생각을 생각한다면 전문가의 조언을 듣고 싶습니다. 코드가 정확하지 않거나 개선이 필요한 부분이 있으면 조언을 주시면 매우 감사하겠습니다.

내 생각은 이렇습니다.
1. 마우스를 눌렀을 때 마우스의 현재 위치를 캡처합니다.

2.

3. 마우스가 움직일 때 마우스 이동 거리를 계산하고 이 거리를 개체의 위치로 업데이트합니다.

4. 마우스가 개체 밖으로 나가거나 마우스가 위로 튀어오르면 개체는 움직일 수 없는 상태로 간주됩니다. 이는 내 코드에서 isMouseDown이라는 bool형 변수로 표현되는데, 이 변수가 true이면 객체가 움직일 수 없는 상태라는 뜻입니다. 마우스가 객체 밖으로 나가거나 팝업되면 isMouseDown을 false로 설정합니다.

알겠습니다. 아래 코드를 게시하겠습니다. 내 아이디어가 명확하지 않은 경우 코드에서 확인할 수 있습니다.

코드 복사 코드는 다음과 같습니다.


< ;head>
레이어 코드를 드래그하세요
="text /javascript" src="http://code.jquery.com/jquery-1.7.min.js">

🎜>

여기에 마우스를 놓고 드래그하세요


마우스



성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.