jQuery如何使用标记

时间:2018-06-01 13:44:13

标签: jquery scale image-resizing

我有这个:

<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

但是我可以弄清楚如何将这种方法应用到可调整大小的图片上,并在其上放置绝对定位的引脚。

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

这里的想法很简单,您可以计算销钉相对于您单击的图像的百分比位置。当您使用position: absolute百分比top / left值时,它会告诉浏览器将元素定位为相对父级宽度/高度的百分比,因此一旦父级维度发生变化,您的职位也会自动更新。

&#13;
&#13;
$(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;
&#13;
&#13;