Имеется конструкция, состоящая из изображения, двух кнопок для его зума, и зеленых точек, расположенных поверх синих отметок в самом изображении.
Необходимо сделать так, чтобы зелёные точки позиционировались на синих метках даже при смене масштаба изображения.
На данный момент, при смене позиции точек пропорционально изменению масштаба изображения, я получаю отклонение от синих меток. При большем количестве манипуляций с зумом, отклонение позиции зеленых точек от синих меток только увеличивается.
Пример кода:
$(".zoo_in").click(function() {
var width = $('.img').width();
width = width * 1.1;
$('.img').css({
"width": width
});
$('.point').each(function(i, elem) {
l = $(this).css('left');
l = parseInt(l);
$(elem).css({
"left": l * 1.1
});
t = $(this).css('top');
t = parseInt(t);
$(elem).css({
"top": t * 1.1
});
});
});
$(".zoom_out").click(function() {
var width = $('.img').width();
width = width / 1.1;
$('.img').css({
"width": width
});
$('.point').each(function(i, elem) {
l = $(this).css('left');
l = parseInt(l);
$(elem).css({
"left": l / 1.1
});
t = $(this).css('top');
t = parseInt(t);
$(elem).css({
"top": t / 1.1
});
});
});
body {
width: 1080px;
height: 1080px;
margin: 0 auto;
text-align: center;
}
.img {
width: 900px;
height: 900px;
background: url(http://fs214.www.ex.ua/show/283368708529/263754406/263754406.png?800);
background-repeat: no-repeat;
background-size: 100%;
}
.zoo_in {
width: 40px;
font-size: 40px;
position: absolute;
top: 265px;
z-index: 2;
left: 55px;
background: white;
}
.zoom_out {
width: 40px;
font-size: 40px;
position: absolute;
z-index: 2;
top: 265px;
left: 250px;
background: white;
}
.points {
position: absolute;
z-index: 3;
top: 0;
}
.point_1 {
width: 10px;
height: 10px;
border-radius: 100%;
background: green;
position: relative;
top: 49px;
left: 216px;
}
.point_2 {
width: 10px;
height: 10px;
border-radius: 100%;
background: green;
position: relative;
top: 130px;
left: 220px;
}
.point_3 {
width: 10px;
height: 10px;
border-radius: 100%;
background: green;
position: relative;
top: 15px;
left: 241px;
}
.point_4 {
width: 10px;
height: 10px;
border-radius: 100%;
background: green;
position: relative;
top: 228px;
left: 154px;
}
.point_5 {
width: 10px;
height: 10px;
border-radius: 100%;
background: green;
position: relative;
top: 275px;
left: 348px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<body>
<div class="img"></div>
<div class="zoo_in">+</div>
<div class="zoom_out">-</div>
<div class="points">
<div class="point_1 point"></div>
<div class="point_2 point"></div>
<div class="point_3 point"></div>
<div class="point_4 point"></div>
<div class="point_5 point"></div>
</div>
</body>
Можно ли как-то убрать отклонения в расстоянии, или хотя-бы очень сильно минимизировать?