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

发布于 2024-09-10 18:36:07 字数 4147 浏览 9 评论 0原文

我有两个元素“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>

原文

I have two elements "src" and "dest"

"src" and "dest" are in different DOM-nodes, that can not have the same parent.

I need to place "src" element in the same visible position, as "dest".

"src" element must also have the same sizes, as "dest".

I have following code for case, when "src" and "dest" having the same parent:

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();

Unfortunately, it does not works. "src" element has displacement to bottom and left, for that i cannot find the reason.

Maybe, i do something wrong ...

How to do it right for two cases ?

"src" and "dest" having the same grand-parent
"src" and "dest" does't having the same parent. Maybe grand-grand-grand-parent is the common for both.

Update:

I have arranged a simple HMTL document, that does a simple visual swapping of one element with another:

<!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>

It does not work correctly. After "swapping", "src" element has a strange displacement to top-left direction on ~30 pixels.

I use latest version of Safari 5, if i makes sense.

Update 2:

Unfortunately, this also does not works. I updated my example:

<!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

意中人 2024-09-17 18:36:08

我在这里测试了它：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 单击时不返回到目标，请删除 src.click() 事件。

I tested it here:http://jsfiddle.net/YEzWj/1/

Using your second example make your CSS like this:

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

EDIT: After playing around with it some, it did not work in all circumstances. I decided to change the javascript. Note: My example toggles the display of src and dest within the holder, making holder the same size as dest so the border shows outside the dest and 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: Remove the src.click() event if you wish it to NOT go back to the dest on src click.

回复收藏 0 原文

泪痕残 2024-09-17 18:36:08

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

You need to make the dest element absolute, otherwise the top and left offsets will not apply.

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

Also, elements like p and body will have default stylesheets depending on browser. So try to supply a reset style to make things consistent:

p {
    margin: 0;
}

body {
    margin: 0;
    padding: 0;
}

回复收藏 0 原文

追星践月 2024-09-17 18:36:08

可以调用offset函数设置偏移量，处理不同的parent正确的是，像这样：

dest.offset(src.offset());

You can call the offset function to set the offset and handle different parents correctly, like this:

dest.offset(src.offset());

回复收藏 0 原文

~没有更多了~

关于作者

弱骨蛰伏

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

梦年海沫深

liaowenxiong

丢了幸福的猪

kaipeng

微信用户

独享拥抱

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

梦年海沫深

liaowenxiong

丢了幸福的猪

kaipeng

微信用户

独享拥抱

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。