使用javascript的响应式绝对位置答案

【问题标题】：responsive position absolute using javascript使用javascript的响应式绝对位置
【发布时间】：2015-06-22 07:00:43
【问题描述】：

我创建了一个代码 sn-p 来演示我的问题。

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;
}

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

有 4 个框我想在背景上映射位置，我使用绝对位置来做到这一点。

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

【问题讨论】：

标签： javascript jquery css responsive-design

【解决方案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 来实现响应式布局。关键是：

当 DOM 准备好后，您可以获得一组这些 div 的数字left，然后您必须将这些数据处理成百分比以进行响应
调整大小时应重新计算窗口宽度。

实际上，当您制定出第一个关键思想时，您就会成功。 ** resize ** 只是让 DEMO 更适应。

【讨论】：

这是一个很酷的解决方案！ init 会在不同大小的视口中工作吗？
@JamesLemon 绝对是，div 的位置取决于你的 css 样式值是什么。
如果你包含背景图片你的代码实际上是行不通的，因为img的x在左边上下移动。
@JamesLemon 这很容易。使用 img 宽度作为参考，而不是 窗口宽度。

【解决方案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>

【讨论】：