0

所以我创建了一个 erb 块，它遍历一组图像，然后在给定坐标处为每个图像显示 div.tagged。在这种特殊情况下，该块会遍历 4 个图像。我在下面创建的效果很好，但是标签的坐标已关闭。有任何想法吗？这是一个jsFiddle，它显示了运行中的代码。提前致谢。

再培训局：

<div class="container">

<% if @new_manual.present? %>
    <% n = 0 %>
    <% @new_manual.steps.each do |step| %>
        <% n += 1 %>

        <% i_connection = Contact.find(step.input_contact) %>
            <span class="i_contact i_contact<%= n %>" data-pos-x="<%= i_connection.pos_x %>" data-pos-y="<%= i_connection.pos_y %>"  data-pos-width="<%= i_connection.pos_width %>" data-pos-height="<%= i_connection.pos_height %>" ="spanid<%= n %>" data-index="<%= n %>"></span>


        <% o_connection = Contact.find(step.output_contact) %>
            <span class="o_contact o_contact<%= n %>" data-pos-x="<%= o_connection.pos_x %>" data-pos-y="<%= o_connection.pos_y %>"  data-pos-width="<%= o_connection.pos_width %>" data-pos-height="<%= o_connection.pos_height %>" id="spanid<%= n %>" data-index="<%= n %>"> </span>
            <% cord = CordType.find(step.contact_item) %>

    <br>
<div class="main_panel">
    <div style='margin: auto; width: 600px;'>
    <div class="image_panel<%= n %>" style="float:left; width:600px; position:relative;">

        <%= o_connection.product.full_name %> uses a  <%= cord.name %> to plug into <%= i_connection.product.full_name %><br>

        <%= image_tag(i_connection.image.image.url(:large)) %>
    <div class="i_tagmap<%= n %>"></div>
    </div>
</div>
</div>

<div class="main_panel">
    <div style='margin: auto; width: 600px;'>
    <div class="image_panel<%= n %>" style="float:left; width:600px; position:relative;">
        <%= image_tag(o_connection.image.image.url(:large)) %>
    <div class="o_tagmap<%= n %>"></div>
    </div>  
</div>  
</div>

    <% end %>   
<% end %>

</div>

jQuery：

<script type="text/javascript">
$(document).ready(function(){

$('span.i_contact').each(function() {               
    var pos_width = $(this).data('pos-width');
    var pos_height = $(this).data('pos-height');
    var xpos = $(this).data('pos-x');
    var ypos = ($(this).data('pos-y')) + -125;
    console.log(ypos)
    var taggedNode = $('<div class="tagged" />')
    taggedNode.css({
        "border":"5px solid red",
        "width":pos_width,
        "height":pos_height,
        "left":xpos,
        "top":ypos
    });

    var n = $(this).data('index')
    $('.i_tagmap' + n).append(taggedNode)        
});

$("span.o_contact").each(function() {            
    var pos_width = $(this).data('pos-width');
    var pos_height = $(this).data('pos-height');
    var xpos = $(this).data('pos-x');
    var ypos = $(this).data('pos-y');

    var taggedNode = $('<div class="tagged" />')
    taggedNode.css({
        "border":"5px solid red",
        "width":pos_width,
        "height":pos_height,
        "left":xpos,
        "top":ypos  
    });
    var n = $(this).data('index')
    $('.o_tagmap' + n).append(taggedNode)       
});
});
</script>

CSS

.image_panel{
  float:left;
  width:600px;
  position:relative;
}
.image_panel img{
  left:0;top:0px;
  max-width: 600px;
  overflow: hidden;
}

.tagged {
  position: absolute;
  z-index: 3000;
}

.main_panel{
  margin: auto;
  padding: 10px;
  width: 1000px;
}
4

1 回答 1

0

我认为问题的一部分.tagged position: absolute是锚定的父母。一个position: absolute元素锚定到最近的父级，带有position. 在这种情况下，那是您的.image_panel. 但是您的最后一个.image_panel包含其他将图片向下推的文本，而图片则.tagged保持原位。您应该确保position: relative div周围只有img和 标签 map div。

但是，这仅修复了您的一些示例。它修复了您的最后一个，但不是您的第一个。

于 2013-07-23T05:45:17.537 回答