Я пытался поместить маленький значок / маркер в большое фоновое изображение, и мне бы хотелось, чтобы фоновое изображение можно было панорамировать при масштабировании, а также иметь несколько уровней масштабирования.
Пока что я попробовал вот так: мой размер деления по умолчанию - 1363 x 900, что показано в Dev Tools.По умолчанию мой маркер размещается на краю экрана здесь, изображение по умолчанию без увеличения Вот скриншоты Размер div по умолчанию , после того как я нажму на функции масштабирования панорамирования, яувидел, что мое изображение стало больше, но я пытаюсь переместить маркер по краю изображения, оно застревает на той же оси x, y моего фонового изображения, после увеличения изображения , я обнаружил, чтовнутри моего Dev Tools размер div все тот же, после увеличения размера div , как изменить мой размер div после того, как я нажму на увеличение?Panzoom вызывает проблемы?
Panzoom из github, https://github.com/timmywil/panzoom, я использую эту библиотеку.
Это код, как я делаю панорамирование и удержание,
<body>
<div class="buttons">
<button class="zoom-out" onclick="zoomMinus()">-</button>
<button class="zoom-in" onclick="zoomAdd()">+</button>
<p id="zoomLevel">Zoom Level 1</p>
</div>
<section>
<div id="panzoom" style="text-align: center;" class="panZoom">
<img id="panzoomImg" src="{% static 'css/dist/img/photo4.jpg'%}" weight="1600" height="900"/>
</div>
</div>
<div id="draggable1" style="width: 150px; height: 150px; background-color: orange;" class="parent">
<div class="count"></div>
</div>
</section>
<section>
<div id="draggable" class="parent">
<div class="padMargin">
<!-- <div class="count"></div> -->
<p class="counter" id="counter">10</p>
<p class="counter1" id="counter1">20</p>
<p class="counter2" id="counter2">30</p>
<p class="counter3" id="counter3">40</p>
</div>
</section>
</body>
Это код jquery:
$('#draggable1').draggable({
cursor: 'move',
containment: '#panzoomImg',
drag: function() {
var cont = $('#panzoomImg').offset();
var img = $(this).offset();
var x = img.left - cont.left
var y = img.top - cont.top
$('#draggable1').text('x-axis :' + x + ', y-axis :' + y);
}});
$(function () {
$("#draggable").draggable({
containment: "#panzoomImg",
scroll: false,
});
});
Я сделал код неправильно?Или мне нужен указанный jquery, чтобы добавить размер div тоже ??Заранее спасибо, пожалуйста, скажите мне, если я не предоставил достаточно информации.Ценю !! ~