响应位置绝对使用JavaScript

Question

我已经创建了一个代码片段来演示我的问题。

＆＃13;

＆＃13;

img {
    border:1px solid;
}
.bubble1 {
    width:50px;
    height:50px;
    background:pink;
    opacity:0.8;
    position:absolute;
    top:65px;
    left:45px;
}
.bubble2 {
    width:50px;
    height:50px;
    background:cyan;
    opacity:0.8;
    position:absolute;
    top:135px;
    left:155px;
}
.bubble3 {
    width:50px;
    height:50px;
    background:orange;
    opacity:0.8;
    position:absolute;
    top:190px;
    left:68px;
}
.bubble4 {
    width:50px;
    height:50px;
    background:red;
    opacity:0.8;
    position:absolute;
    top:220px;
    left:213px;
}

＆＃13;

<img src="http://i.imgur.com/62GOyK9.png" />
<div class="bubble1"></div>
<div class="bubble2"></div>
<div class="bubble3"></div>
<div class="bubble4"></div>

＆＃13;

＆＃13;

＆＃13;

我想要在背景上映射位置有4个方框，我使用绝对位置来做。

但问题是它无法做出回应。在较大/较小的屏幕上，图像被拉伸并且映射变得偏离目标。如何使用javascript解决我的问题？

Answer 1

$(function (){
  var init_width = $(window).width();
  var all_div = $('div');
  var init_left = function (){
    var result = [];
    all_div.each(function (i){
    var left = parseInt($(all_div[i]).css('left'));
    result.push(left); 
    });
    return result;
  }();  
  $(window).resize(function (){  
    var width = $(window).width();
    all_div.each(function (i){
      var now_left = init_left[i]/init_width * width;
      $(all_div[i]).css('left',now_left);
    });
  });  
});

img {
    border:1px solid;
}
.bubble1 {
    width:50px;
    height:50px;
    background:pink;
    opacity:0.8;
    position:absolute;
    top:65px;
    left:45px;
}
.bubble2 {
    width:50px;
    height:50px;
    background:cyan;
    opacity:0.8;
    position:absolute;
    top:135px;
    left:155px;
}
.bubble3 {
    width:50px;
    height:50px;
    background:orange;
    opacity:0.8;
    position:absolute;
    top:190px;
    left:68px;
}
.bubble4 {
    width:50px;
    height:50px;
    background:red;
    opacity:0.8;
    position:absolute;
    top:220px;
    left:213px;
}

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<div class="bubble1"></div>
<div class="bubble2"></div>
<div class="bubble3"></div>
<div class="bubble4"></div>

我制作草稿DEMO以实现响应式布局。关键思想是：

1. 当DOM准备就绪时，您可以获得这些div left的一组数字，然后您必须将这些数据处理为百分比以便响应
2. 调整大小时应重新计算窗口宽度。
实际上，当你找到第一个关键思想时，你就会成功。 **调整大小**只是让DEMO更适应。

Answer 2

你真的需要一个javascript解决方案吗？

为什么你不能在CSS位置样式中使用百分比？

img {
    border:1px solid;
}
.bubble1 {
    width:50px;
    height:50px;
    background:pink;
    opacity:0.8;
    position:absolute;
    top:15%;
    left:10%;
}
.bubble2 {
    width:50px;
    height:50px;
    background:cyan;
    opacity:0.8;
    position:absolute;
    top: 30%;
    right:30%;
}
.bubble3 {
    width:50px;
    height:50px;
    background:orange;
    opacity:0.8;
    position:absolute;
    bottom: 30%;
    left:30%;
}
.bubble4 {
    width:50px;
    height:50px;
    background:red;
    opacity:0.8;
    position:absolute;
    bottom: 20%;
    right:10%;
}

<div class="bubble1"></div>
<div class="bubble2"></div>
<div class="bubble3"></div>
<div class="bubble4"></div>