我有这个:
<style>
#pic_wrapper{
display: block;
position: relative;
padding: 0;
}
#selected_picture img {
width: 100%;
height: auto;
}
.pin {
display: none;
position: absolute;
height: 50px;
width: 50px;
padding: 0;
margin: 0;
}
</style>
<div id="pic_wrapper">
<div id="selected_picture">
<img src="map.png" />
</div>
</div>
并使用以下标记将标记添加到图像中
<script type="text/javascript" charset="UTF-8">
$(function(){
$('#selected_picture').on('click', function(e){
offset = $('#selected_picture').offset();
x = e.pageX - offset.left - 25;
y = e.pageY - offset.top - 25;
var pin = $('<div class="pin"><img class="pin-img" src="pin.png" /></div>');
pin.uniqueId();
$('#pic_wrapper').append(pin);
pin.css('left', x).css('top', y).show();
我需要将#selected_picture与所有引脚一起缩放,以便它们保持相同的相对位置。
我在div中找到了这个示例:https://codepen.io/chriscoyier/pen/VvRoWy
但是我可以弄清楚如何将这种方法应用到可调整大小的图片上,并在其上放置绝对定位的引脚。
感谢您的帮助。
答案 0 :(得分:0)
这里的想法很简单,您可以计算销钉相对于您单击的图像的百分比位置。当您使用position: absolute
百分比top
/ left
值时,它会告诉浏览器将元素定位为相对父级宽度/高度的百分比,因此一旦父级维度发生变化,您的职位也会自动更新。
$(function(){
$('#selected_picture').on('click', function(e){
x = ((e.offsetX) / $(this).width()) * 100 + "%";
y = ((e.offsetY) / $(this).height()) * 100 + "%";
var pin = $('<div class="pin"></div>');
$('#pic_wrapper').append(pin);
pin.css('left', x).css('top', y).show();
})
});
&#13;
#pic_wrapper{
display: block;
position: relative;
padding: 0;
}
#selected_picture .map {
display: block;
background: green;
width: 100%;
height: 250px;
}
.pin {
display: none;
position: absolute;
height: 50px;
width: 50px;
transform: translate(-50%, -50%);
padding: 0;
margin: 0;
background: blue;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pic_wrapper">
<div id="selected_picture">
<div class="map"></div>
</div>
</div>
&#13;