Question

我觉得我非常接近于弄清楚这一点，但遗漏了一些东西......我试图在我的图像地图上将多个div放置在多个矩形区域形状的顶部和左侧位置之上。一切都跟踪我的控制台很好，但它没有设置div的顶部和左侧位置

以下是我到目前为止的情况，但觉得我错过了一些东西......任何人都会成为一个救生员！

图片地图：

  <img id="map" src="assets/img/header_bg2.png" width="1345" height="534"  border="0" usemap="#neighbormap" />
  <map name="neighbormap" id="neighbormap">
   <areaclass="button" data-target="one" shape="rect" coords="335,239,376,282" href="#" />
   <area class="button" data-target="two" shape="rect" coords="401,116,438,155" href="#" />
   <area class="button" data-target="three" shape="rect" coords="493,7,536,42" href="#" />
 </map>

需要放置在区域形状的顶部和左侧位置上方的Div：

 <div class="container">
   <div class="one">one</div>
   <div class="two">two</div>
   <div class="three">three</div>
</div>

Jquery的：

  $('#neighbormap').find('.button').each(function(index, element){
    var i, x = [], y = [];
    var c = $(this).attr('coords').split(',');
    var id = $(this).data('target')
    for (i=0; i < c.length; i++){
     x.push( c[i++] );
     y.push( c[i] );
    }
    var t = y.sort(num)[0];
    var l = x.sort(num)[0];

    $('.' + id).css({top: t, left: l, position:'absolute'});

    //console.log(t + ',' + l );

    function num(a, b){ return (a-b);
     }
})

更新：

我错过了“px”它应该是这样的：

  $('.' + id).css({top : t +'px',left : l +'px'});

Answer 1

我错过了“px”它应该是：$（'。'+ id）.css（{top：t +'px'，left：l +'px'}）;

使用jquery在区域顶部和左侧位置上方的div

1 个答案: