画像のサイズを変更してドラッグできるバナーを作成しようとしています。サイズ変更を除いて、すべてが正常に機能しています。
画像の下のスライダーで画像のサイズを変更する場合。イメージが膨らみます。画像のサイズを変更した後、右と下にドラッグすることができます。画像を右にドラッグすると、画像を再び小さくすることにしました。画像の下のスライダーを使用できます。しかし、ここで問題が発生します。画像の右側にいて、画像のサイズを再度変更したい場合、画像は div に収まりません。黒い背景が表示されます。
例を次に示します: http://jsfiddle.net/DennisBetman/tnaGA/
HTML:
<div id="box">
<img src="http://www.digindigin.com/blog/wp-content/uploads/2012/05/Diablo_3___Wizard_Wallpaper_by_Lythus.jpg" id="img" width="371" height="auto" style="top:-0px; left:-0px;" />
</div>
<!-- style="top:-262px; left:-425px;" -->
<div id="zoom"></div>
<input type="hidden" id="amount-width" style="border: 0; color: #f6931f; font-weight: bold;" />
<input type="hidden" id="amount-height" style="border: 0; color: #f6931f; font-weight: bold;" />
<div class="text"></div>
<p>
Position x:
<input type="text" id="val-x" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<p>
Position y:
<input type="text" id="val-y" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
jQuery:
jQuery("#zoom").slider({
max: 650,
slide: function(){
var sliderValue = jQuery("#zoom").slider("value");
jQuery("#img").width(370 + sliderValue);
$("#amount-width").val(jQuery("#img").css("width"));
$("#amount-height").val(jQuery("#img").css("height"));
var width = $("#img").width();
var widthZoom = width + sliderValue;
var widthVerschil = widthZoom - sliderValue;
var totalWidth = widthVerschil - '373';
var stageWidth = $("#box").width();
var height = $("#img").height();
var totalHeight = height - '207';
$("#img").draggable({
containment: [-totalWidth, -totalHeight, 0, 0],
scroll: false,
iframeFix: true,
});
$('.text').html('<br/>The file size = ' + height + ' x ' + widthVerschil);
}
});
var height = $("#img").height();
var totalHeight = height - '207';
$("#img").draggable
({
containment: [0, -totalHeight, 0, 0],
snap: false,
drag: function(event, ui)
{
$("#val-x").val(ui.position.left);
$("#val-y").val(ui.position.top);
}
});
$("#img").offset({left: $(this).attr('position')});
CSS:
div {
width:370px;
height:204px;
position:relative;
overflow:hidden;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
#box{
background:black;
}
#img{
}
誰かが私を助けてくれることを願っています。
ごきげんよう、デニス。