Question

我有两个元素“src”和“dest”

“src”和“dest”位于不同的DOM节点中，不能有相同的父节点。

我需要将“src”元素放在相同的可见位置，如“dest”。

“src”元素也必须具有相同的大小，如“dest”。

当“src”和“dest”具有相同的父级时，我有以下代码：

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>

Answer 1

您需要将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;
}

Answer 2

我在这里测试了它：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(); 
    }); 

});

EDIT2：删除src.click（）事件，如果你希望它不回到src点击的目的地。

Answer 3

您可以调用offset function来设置偏移量并正确处理不同的父母，如下所示：

dest.offset(src.offset());

如何将一个元素精确地放置到同一个可见位置，与另一个元素相同？

3 个答案: