jQuery的調整大小，相對位置保持註釋圖像

我創建了一個腳本，允許用戶對圖像的頂部發表評論。該img是響應式的，但在IMG頂部的意見，而不是。當我調整大小時，評論留在原來的頂部和左側位置，我無法讓他們保持各自的位置。我上傳了一個jquery小提琴給你看。我真的可以用你的幫助！

var oldHeight = $('#proofNow').height(), 
    oldWidth = $('#proofNow').width(); 

$(window).resize(function() { 
    var parent = $('#proofNow'), 
     parentWidth = parent.width(), 
     parentHeight = parent.height(); 

    $("img.TDot").each(function(){ 
     var top = parseInt($(this).css("top")), 
      left = parseInt($(this).css("left")), 
      topRatio = oldHeight/top, 
      leftRatio = oldWidth/left, 
      newTop = parentHeight/topRatio, 
      newLeft = parentWidth/leftRatio; 

     //console.log('top: ' + top + ', left: ' + left); 
     $(this).css("top", newTop); 
     $(this).css("left",newLeft); 
    }); 

    console.log(parent.width()); 
});

我想我的數學是錯誤的，但我仍然無法弄清楚。我需要能夠兩種方式

來源

2014-10-09 Chris Cloyd

我很困惑爲什麼你需要使用Javascript？什麼阻止了你讓瀏覽器做了艱苦的工作，並且使用了CSS/Html。

的CSS塊

div { 
    position: relative; 
    left: 0px; 
    top: 0px; 
    width="60%" 
}

的HTML文本塊

<div> 
    <div name="comments"> ... </div> 
    <img src="..." /> 
</div>

來源

2014-10-09 22:45:44

所有主要div有相對的位置，所有的意見都設置爲絕對的，但他們仍然不動，並保持相對位置。 – 2014-10-09 22:48:20

考慮到這一點，佈局的改變大部分可以通過CSS和HTML完成。無視發佈的實際css規則，你應該能夠想出一個html佈局和css規則集來實現你正在尋找的風格。 – 2014-10-10 00:12:55

jQuery的調整大小，相對位置保持註釋圖像

回答

相關問題