이 기사의 예에서는 jQuery가 DIV 레이어의 페이드인 및 페이드아웃 드래그 효과를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. jQuery는 DIV 레이어 페이드 인 및 아웃의 드래그 효과를 실현합니다.) <br> #div2<br> {<br> 위치:절대;<br> 너비:400px;<br> 높이:300px;<br> 테두리:1px 단색 #333333;<br> 배경색:#777788;<br> 텍스트 정렬:가운데;<br> 줄 높이:400%;<br> 글꼴 크기:13px;<br> 왼쪽:80px;<br> 상단:20px;<br> }<br> </스타일><br> <script type="text/javascript" 언어="javascript" src="/images/jquery.js"></script><br> <script type="text/javascript" 언어="javascript"><br> var _move=false;//표시 이동<br> var _x,_y;//컨트롤 왼쪽 상단에서 마우스의 상대적 위치<br> $(문서).ready(함수(){<br> $("#div2").click(함수(){<br> //alert("click");//클릭(손을 뗀 후 트리거됨) <br> }).mousedown(function(e){<br> _move=true;<br> _x=e.pageX-parseInt($("#div2").css("왼쪽"));<br> _y=e.pageY-parseInt($("#div2").css("top"));<br> $("#div2").fadeTo(20, 0.25);//클릭 후 드래그를 시작하면 투명하게 표시됩니다<br> });<br> $(문서).mousemove(함수(e){<br> if(_move){<br> var x=e.pageX-_x;//이동 시 마우스 위치를 기준으로 컨트롤 왼쪽 상단의 절대 위치 계산 <br> var y=e.pageY-_y;<br> $("#div2").css({top:y,left:x});//컨트롤의 새 위치<br> }<br> }).mouseup(함수(){<br> _move=false;<br> $("#div2").fadeTo("fast", 1);//움직임을 멈추고 마우스를 놓으면 불투명하게 돌아갑니다<br> });<br> });<br> <br> </머리><br> <br> <h4> 효과가 표시되지 않으면 이 페이지를 새로고침하세요. <br> <div id="div2">드래그 지원<br>드래그할 수 없는 경우 페이지를 새로고침하세요</div><br> </본문><br> </div>
