0

div 要素にドラッグ可能な画像オブジェクトがあります (画像を div の外にドラッグすることはできません)。また、そのドラッグ可能な画像のズームスライダーを作成しましたが、問題は、画像をズームして div 境界の外に出ることです (画像をドラッグして div 境界の近くでズームした場合)。それを修正するには、どこにでもドラッグして、その div で再び動けなくなる必要があります。ズーム時に、ズームされた画像が重なる div 要素内に画像を保持する方法はありますか (最大画像ズームは div 要素より大きくありません)。私の質問を理解していただければ幸いです。これが私のコードです：

$(function() {
      $( ".over_image" ).draggable({ cursor: "move", cursorAt: { top: 30, left: 80 } });
      $( ".over_image" ).draggable({ containment: "parent", scroll: false });
}); 
   $("#slider").slider({
                    step: 2,
                    min: 75,
                    max: 220,
                    value: 150,
                    slide: function(e,ui){
                        var sliderValue =  jQuery("#slider").slider("value");
                        $(".over_image").width(sliderValue);

                    }
                });



<div class="wraper">
     <div id="output" class="foto-frame">
 <img class="over_image" id="img_1" src="1.png" width="100" height="auto" />
     </div>
<div id="progressbox"><div id="progressbar"></div ></div>
<div class="nav-buttons">
     <div id="slider"></div>
</div>

#output画像がdiv の外に出られない

4

1 に答える 1

0

この属性をdivクラスに追加してみましたか？

.foto-frame {
        overflow:hidden;
}
于 2012-11-10T11:42:48.400 に答える