0

小さな div 内に保持されている大きな画像があります。div がposition:absolute; top:10px; left:10px; width:563px; height:563px; z-index:200; overflow:hidden適用されているため、画像の一部のみが表示されます。div は、画面上のページを中央に配置する別の div 内にあります。width:1000px; margin:0 auto; position:relative;

画像に適用$('#theImage').draggable({cursor: 'move', containment: [-523,-738,361,146]});しました。つまり、画像を div の周りにドラッグできますが、画像の外縁が div の外縁を超えることはありません。(つまり、画像の左端を div の左端を超えてドラッグすることはできません。同じことが右端、上端、および下端にも適用されます) したがって、画像は常に div を完全に埋めます。背景は見えません。

これは、ブラウザが最大化されている場合は正常に機能しますが、そうでない場合は変更されます。コンテナの X 値と Y 値は、親 div ではなく、ブラウザ ウィンドウから計算されると想定しています。divから強制的に計算する方法はありますか? (コンテインメントを 'parent' に設定しても、画像を見えないようにドラッグできるため機能しません (つまり、画像の各エッジを div の反対側のエッジまでドラッグできます)。

4

1 に答える 1

0

私は同じ問題を抱えていましたが、これが私がそれを解決した方法です：

var windowX = $( window ).width(); //determines the width of the browser window
var windowY = $( window ).height();//determines the height of the browser window
var imageX = 2000; //put the width of your image here. my image was 2000x1000
var imageY = 1000;//image height
$("#theImage").draggable({ containment: [(windowX - imageX),(windowY - imageY),0,0] });

最後の行には、ブラウザの左上隅と幅/高さの間に画像が含まれています。お役に立てれば！

于 2014-11-20T20:03:43.980 に答える