js画像拡大効果改訂版_画像特殊効果

まず、移動可能な DIV が必要です

コードをコピー コードは次のとおりです。 div style="border:1px Solid #CCC;position:absolute; width:200px; height:100px;cursor:move;" id="jelle_test_divquot;> この DIV は移動でき、テストできます。 var getMouseP=function (e){//マウス座標を取得するには、evnet パラメータ e を渡します= e || ウィンドウ。イベント; 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 }; move=function(o,t){ >o=$j( o); t=$j(t); o.onmousedown=function(ev){ var mxy=getMouseP(ev);// 現在のマウス座標を取得します var by={ x:mxy.x-(t.offsetLeft),y:mxy.y-(t.offsetTop)}; o.style.cursor="move"; onmousemove=function(ev){ var mxy=getMouseP(ev); t.style.left=mxy.x-by.x "px"; -by.y "px" ; document.onmouseup=function(){ window.getSelection().removeAllRanges() : document.selection.empty(); 🎜>this.onmousemove=null ; } } move("jelle_test_div","jelle_test_div")

次に、彼を制御する必要があります。

コードをコピーします

コードは次のとおりです:

style="幅:100px; 高さ:50px; ボーダー: 1px ソリッド #CCC;" id="jelle_move"> javascript"> var mp=function (e ){//マウス座標を取得するには、evnet パラメータを渡してください e = e || window.event; 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 }; return m; } var move2=function(o,t){//CSS を設定して filter:alpha(opacity=100); >//oマウスドラッグに対応する領域ID Tを移動 オブジェクトID o=$j(o) by_o={x:o.offsetLeft, y:o.offsetTop}; o.onmousemove =function(ev){ //var mxy=Jelle.getMouseP(ev);//現在のマウス座標を取得します var by={x: t.offsetLeft,y:t.offsetTop}; var ms=mp(ev); t.innerHTML=(by_o.x-by.x) "---" (by_o.x-by. y); jy=ms.y-by_o. y-25; jx=ms.x-by_o.x-50;// 移動中の高さを減算します。 box maxx=500-100;//ボックスの幅を減算します var y=jy>=maxy?maxy:jy var x=jx> =maxx?maxx:jx t.style.marginTop=y "px"; t.style.marginLeft=x "px"; move2("jelle_warpper","jelle_move") &lt ;/script>

上記の問題は解決しました。そうすれば、この効果は難しくありません。 ！ x y を取得できます。これは、大きな画像の背景の x y を設定するために使用されます。 ここで注意すべきこと。大きな写真と小さな写真の割合を把握する必要があります。 画像を表示している DIV と移動している DIV の比率もあります。 たとえば、ここでの比率は次のとおりです: 大きい画像は 800*800、小さい画像は 200*200 大きい画像を表示する DIV は 200*200、移動 DIV は 50*50 です。 実は、私はまだこの公式を理解していません。ちょっとめまいを感じます（笑）。 以下のコードをすべて投稿します:

画像拡大効果