まず、移動可能な 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 || ウィンドウ。イベント; <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>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"; onmousemove=function(ev){ <br>var mxy=getMouseP(ev); <br>t.style.left=mxy.x-by.x "px"; -by.y "px" ; <br>document.onmouseup=function(){ <br>window.getSelection().removeAllRanges() : document.selection.empty(); 🎜>this.onmousemove=null ; <br>} <br>} <br>move("jelle_test_div","jelle_test_div") <br><br>次に、彼を制御する必要があります。<br><br><br><br><br>コードをコピーします<br><br><br> コードは次のとおりです:<br><br> </div><div style="ボーダー:1px ソリッド #CCC; 幅:500px; 高さ:415px; 背景:url(xxx/c.jpg);" id="jelle_warpper"> style="幅:100px; 高さ:50px; ボーダー: 1px ソリッド #CCC;" id="jelle_move"></div> <br></div> javascript"> <br>var mp=function (e ){//マウス座標を取得するには、evnet パラメータを渡してください <div class="codetitle">e = e || window.event; <span>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 }; <a style="CURSOR: pointer" data="77286" class="copybut" id="copybut77286" onclick="doCopy('code77286')">return m; <u>} </u>var move2=function(o,t){//CSS を設定して filter:alpha(opacity=100); >//oマウスドラッグに対応する領域ID Tを移動 オブジェクトID </a>o=$j(o) </span>by_o={x:o.offsetLeft, y:o.offsetTop}; </div>o.onmousemove =function(ev){ <div class="codebody" id="code77286">//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); <br>jy=ms.y-by_o. y-25; <br>jx=ms.x-by_o.x-50;// 移動中の高さを減算します。 box <br>maxx=500-100;//ボックスの幅を減算します<br>var y=jy>=maxy?maxy:jy<br>var x=jx> =maxx?maxx:jx<=0?0:jx; <BR> t.style.marginTop=y "px"; <BR>t.style.marginLeft=x "px"; <BR>move2("jelle_warpper","jelle_move") <BR>< ;/script> <br><br> <br>上記の問題は解決しました。そうすれば、この効果は難しくありません。 ！ <br>x y を取得できます。これは、大きな画像の背景の x y を設定するために使用されます。 <br>ここで注意すべきこと。大きな写真と小さな写真の割合を把握する必要があります。 <br>画像を表示している DIV と移動している DIV の比率もあります。 <br>たとえば、ここでの比率は次のとおりです: 大きい画像は 800*800、小さい画像は 200*200 <br>大きい画像を表示する DIV は 200*200、移動 DIV は 50*50 です。 <br>実は、私はまだこの公式を理解していません。ちょっとめまいを感じます（笑）。 <br>以下のコードをすべて投稿します: <br><br><br> <br> <br> <br> <br> <br> <br>画像拡大効果<br> </div> <br> <br> <br> <br> <br><br> <br> <br><br> <div class="htmlarea"> <textarea id="runcode78071"> <input type="button" value="OK!我想换张图片" style="margin-left:50px;" onclick="jelle(imgss[Math.floor(Math.random()*4)]);"> <!--辅助 end--> </textarea> </div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
