먼저 이동 가능한 DIV가 필요합니다 코드 복사 코드는 다음과 같습니다. < div style="border:1px solid #CCC;position:absolute; width:200px; height:100px;cursor:move;" id="jelle_test_divquot;> 이 DIV는 이동 가능하며 테스트할 수 있습니다. <br>var getMouseP=function (e){//마우스 좌표를 얻으려면 evnet 매개변수 <br>e를 전달하세요. = e || window.event; <br>var m=(e.pageX || e.pageY)?{ x:e.pageX, y:e.pageY } : { x:e.clientX document.body.scrollLeft - document.body.clientLeft , y:e.clientY document.body.scrollTop - document.body.clientTop } <br>return m; <br>} <br>move=function(o,t){ <br>o=$j(o); <br>t=$j(t); <br>o.onmousedown=function(ev){ <br>var mxy=getMouseP(ev);//현재 마우스 좌표 가져오기 <br>var by={ x:mxy.x-(t.offsetLeft),y:mxy.y-(t.offsetTop)} <br>o.style.cursor="move" <br>문서. onmousemove=function(ev){ <br>var mxy=getMouseP(ev) <br>t.style.left=mxy.x-by.x "px" <br>t.style.top=mxy.y -by.y "px" ; <br>}; <br>document.onmouseup=function(){ <br>window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); 🎜>this.onmousemove=null ; <br>} <br>} <br>} <br>move("jelle_test_div","jelle_test_div") <br><br><br>그러면 그를 조종해야 합니다 </div> <br><br><div class="codetitle"><span>코드 복사<a style="CURSOR: pointer" data="77286" class="copybut" id="copybut77286" onclick="doCopy('code77286')"><u></u>의 이동 범위는 다음과 같습니다.</a></span></div><div style="border:1px solid #CCC; 너비:500px; 높이:415px; 배경:url(xxx/c.jpg);" id="jelle_warpper"> style="width:100px; height:50px; border: 1px solid #CCC;" id="jelle_move"></div> <div class="codebody" id="code77286"></div><br><script type="text/ javascript"> <br>var mp=function (e ){//마우스 좌표를 얻으려면 evnet 매개변수를 전달하세요 <br>e = e || window.event; <br>var m=(e.pageX || e.pageY)?{ x:e.pageX, y:e .pageY } : { x:e.clientX document.body.scrollLeft - document.body.clientLeft, y:e.clientY document.body.scrollTop - 문서. body.clientTop }; <br>return m; <br>} <br>var move2=function(o,t){//CSS position:absolute;를 설정하고 filter:alpha(opacity=100)를 활성화하세요. >//o마우스 드래그에 해당하는 영역 ID T가 이동됩니다. Object ID <br>o=$j(o) <br>t=$j(t) <br>by_o={x:o.offsetLeft, y:o.offsetTop}; <br>o.onmousemove =function(ev){ <br>//var mxy=Jelle.getMouseP(ev);//현재 마우스 좌표 가져오기<br>var by={x: t.offsetLeft,y:t.offsetTop}; <br> var ms=mp(ev); <br>t.innerHTML=(by_o.x-by.x) "---" (by_o.x-by. y); jy=ms.y-by_o.y-25; <br>jx=ms.x-by_o.x-50; <br>maxy=415-50;//이동 높이를 뺍니다. box <br>maxx=500-100;//움직임 빼기 상자 너비<br>var y=jy>=maxy?maxy:jy<=0?0:jy <BR>var x=jx> =maxx?maxx:jx<=0?0:jx; <BR> t.style.marginTop=y "px"; <BR>t.style.marginLeft=x "px" <BR>} <BR>} <BR>move2("jelle_warpper","jelle_move") <BR>< ;/script> <br><br> <br>위의 문제를 해결했습니다. 그렇다면 이 효과는 어렵지 않습니다. ! <br>큰 그림 배경의 xy를 설정하는 데 사용되는 xy를 얻을 수 있습니다. <br>여기서 주의할 점. 큰 그림과 작은 그림의 비율을 파악하는 것이 필요합니다. <br>이미지를 표시하는 DIV와 움직이는 DIV의 비율도 있습니다. </div>예를 들어 여기서 비율은 다음과 같습니다. 큰 이미지는 800*800, 작은 이미지는 200*200 <br>큰 이미지를 표시하는 DIV는 200*200, 움직이는 div는 50*50입니다. <br>사실 저는 아직 이 공식을 생각해내지 못했습니다. 좀 현기증이 나네요 하하. <br>아래 코드는 모두 게시합니다. <br><br><br> <br> <br> <br> <div class="htmlarea"> <textarea id="runcode78071"> 사진 확대 효과 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="Author" content="jelle.lu jelle.lu[at]gmail.com"> <title> </title> <style type="text/css"> .img_box,.show_box{border:1px solid #CCC; width:200px;height:200px;float:left;float:left;margin:20px;margin:20px; overflow:hidden;} .img_box,.show_box{ background-position:0 0; background-repeat:no-repeat; } .ms_box{width:50px; height:50px;border:1px solid #CCC;background:#000;filter:alpha(opacity=20);opacity:0.2; display:none} .show_box{display:none} </style> <!--html--><div class="img_box" id="j_warp"> <div class="ms_box" id="j_ms"> </div> </div> <div class="show_box" id="j_show"><input type="button" value="OK!"></div></textarea> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
