如何將一個元素精確地放置到相同的可見位置，如另一個？

我有兩個元素「src」和「dest」如何將一個元素精確地放置到相同的可見位置，如另一個？

「src」和「dest」在不同的DOM節點中，不能有相同的父節點。

我需要將「src」元素放置在與「dest」相同的可見位置。

「src」元素也必須與「dest」具有相同的大小。

當「SRC」和「目標」具有相同父節點我有以下的情況下，代碼：

src.css("position", "absolute"); 
src.css("top", dest.offset().top); 
src.css("left", dest.offset().left); 
src.width(dest.width()); 

// Show "src" element, instead of "dest". "src" must be in the same visible position, as "dest" 
dest.css("opacity", 0); 
src.show();

不幸的是，它不工作。「src」元素有位移到底部和左側，因爲我無法找到原因。

也許，我做錯了什麼......

如何針對兩種情況做是正確的？

「SRC」和「dest中」具有相同的宏偉父
「SRC」和「dest中」簡化版，具有相同父節點。也許祖父母是雙方的共同點。

更新：

我已經安排了一個簡單的HMTL文件，但這一個元素的簡單的視覺交換與另一：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>MacBlog</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" charset="utf-8"></script> 
    <style type="text/css" media="screen"> 
     .dest { 
      background-color: #0cf; 
      width: 480px; 
      height: 320px; 
     } 
     .src { 
      background-color: #09c; 
      width: 1024px; 
      height: 768px; 
     } 
    </style> 
    <script type="text/javascript" charset="utf-8"> 
     jQuery(function($){ 
      // Common items, to deal with 
      var src = $(".src"); 
      var dest = $(".dest"); 
      // Setup 
      src.hide(); 
      // Interaction 
      dest.click(function(){ 
       src.width(dest.width()); 
       src.height(dest.height()); 
       src.offset(dest.offset()); 

       dest.hide(); 
       src.show(); 
      }); 

     }); 
    </script> 
</head> 
<body> 
    <div> 
     <!--On clicking, this element should visually be swapped by ".src" element --> 
     <div class="dest"><p>dest</p></div> 
     <div class="src"><p>src</p></div> 
    </div> 
</body> 
</html>

它不能正常工作。在「交換」之後，「〜src」元素在〜30像素左右有一個奇怪的位移。

我使用最新版本的Safari 5，如果我有道理。

更新2：

不幸的是，這也沒有工作。我更新了我的例子：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>MacBlog</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" charset="utf-8"></script> 
    <style type="text/css" media="screen"> 
     div { 
      margin: 0; 
      padding: 0; 
     } 
     .holder { 
      position: relative; 
      top: 40pt; 
      left: 40pt; 
      border: black solid thin; 
     } 
     .dest { 
      background-color: #0cf; 
      width: 480px; 
      height: 320px; 
     } 
     .src { 
      background-color: #09c; 
      width: 1024px; 
      height: 768px; 
     } 
    </style> 
    <script type="text/javascript" charset="utf-8"> 
     jQuery(function($){ 
      // Common items, to deal with 
      var src = $(".src"); 
      var dest = $(".dest"); 
      // Setup 
      src.hide(); 
      // Interaction 
      dest.click(function(){ 
       src.css("position", "absolute"); 
       src.width(dest.width()); 
       src.height(dest.height()); 
       src.offset(dest.offset()); 

       dest.hide(); 
       src.show(); 
      }); 

     }); 
    </script> 
</head> 
<body> 
    <div class="holder"> 
     <!--On clicking, this element should visually be swapped by ".src" element --> 
     <div class="dest"><p>dest</p></div> 
     <div class="src"><p>src</p></div> 
    </div> 
</body> 
</html>

來源

2010-07-21 AntonAL

請參閱http://stackoverflow.com/questions/683339/how-do-i-find-the-absolute-position-of-an-element-using-jquery/683564#683564 – 2010-07-21 15:03:05

我測試了它在這裏：http://jsfiddle.net/YEzWj/1/

使用你的第二個例子讓你的CSS是這樣的：

div { 
    position:relative; 
    margin: 0; 
    padding: 0; 
} 
.holder { 
    position: relative; 
    top: 40pt; 
    left: 40pt; 
    border: black solid thin; 
} 
.dest { 
    position:absolute; 
    background-color: #0cf; 
    width: 480px; 
    height: 320px; 
} 
.src { 
    background-color: #09c; 
    width: 1024px; 
    height: 768px; 
}

編輯：打後在一些情況下，它在任何情況下都不起作用。我決定改變JavaScript。注意：我的示例在持有者中切換src和dest的顯示，使得持有者與dest的大小相同，因此邊界顯示在dest和src之外。

jQuery(function($){ 
    // Common items, to deal with 
    var src = $(".src"); 
    var dest = $(".dest"); 
    var holder=$(".holder"); 
    holder.width(dest.width()); 
    holder.height(dest.height()); 
    // Setup 
    src.hide(); 
    // Interaction 
    dest.click(function(){ 
     src.show(); 
     src.css("position", "absolute"); 
     src.width(dest.width()); 
     src.height(dest.height()); 
     src.offset(dest.offset()); 
     dest.hide(); 
    }); 
    src.click(function(){ 
     dest.show(); 
     src.hide(); 
    }); 

});

編輯2：刪除src.click（）事件，如果你希望它不回到src點擊dest。

來源

2010-07-21 18:58:46

謝謝！有用。 – AntonAL 2010-07-21 20:22:46

可以調用offset function正確設置偏移和處理不同的父母，就像這樣：

dest.offset(src.offset());

來源

2010-07-21 14:13:07 SLaks

不幸的是，我不工作。查看我的問題更新 – AntonAL 2010-07-21 14:43:23

你需要讓dest元素絕對的，否則top和left補償不適用。

src.css('position', 'absolute'); // ensure position is set to absolute 
src.offset(dest.offset());

此外，元素如p和body將根據瀏覽器具有默認樣式表。因此，嘗試提供一個復位風格讓事情保持一致：

p { 
    margin: 0; 
} 

body { 
    margin: 0; 
    padding: 0; 
}

來源

2010-07-21 15:59:51 Anurag

我嘗試了，您建議，並且這不起作用。請參閱我的問題的「更新2」。你可以讓「更新2」工作嗎？這不是那麼簡單，因爲我認爲... – AntonAL 2010-07-21 18:47:22

如何將一個元素精確地放置到相同的可見位置，如另一個？

回答

相關問題