Question

假设有一个复杂的网站，有许多样式等。该网站上还有许多图像可以定位，内联，阻止或其他。

我想要做的是在每张图片上方放置一个叠加图标！

首次尝试是为身体末端的每个图像的每个图像图标创建一个position:absolute span，并将其移到图像上。问题：如果网站上的某些内容移动，隐藏或显示，那么图像可能也会移动，但图标叠加将保持不变，因此图标不再位于图像上方。

所以我想使用jQuery.wrap用position:relaitve将每个图像包装在一个div中，然后我将图标叠加也放在div中并将其放在div中。因此，如果div + image移动，图标也会移动。

问题在于div必须在某种程度上对上下文和网站结构以及dom没有影响，因此它不会破坏网站的布局。我怎样才能创建这样一个“中立”的div？

我的代码的简化版本：

$("img:visible").each(function(i, v){
    var img = $(this);
    var position = img.offset();
    $('<span class="icon" />')
    .css({
        'top': position['top'] + 5,
        left': position['left'] + 5
    })
    .appendTo(document.documentElement)
}
//css
.icon {
    position: absolute;
    display: block;
    z-index: 50000;
    width: 16px;
    height: 16px;
}

Answer 1

不要使用块级元素，它可能会弄乱你的HTML流。而是使用<span>元素，它会环绕图像但不会将自己的结构添加到页面中：

$(function () {
    $("img").wrap('<span class="img-overlay" />');
});

然后你可以将任何CSS添加到.img-overlay类，例如背景图像作为水印。

如果你想用更多的HTML包装图像，你可以像这样一次添加它：

$(function () {
    $("img").wrap(
        $('<span class="img-overlay" />').append(
            $('<span class="img-underlay" />')
        )
    );
});

我建议尝试使用尽可能少的元素，因为它会为您的用户创造更流畅的体验。

Answer 2

在CSS中声明以下规则：

img {
  display: block;
  object-fit: contain;
  height: auto;
  margin: 0;
}    

.frame {
  position: relative;
  padding: 0;
  margin: 0;
  width: fit-content;
  height: auto;
}

.logo {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  background: url(https://jsdotgit.com/js-small.gif)no-repeat center;
  background-size: contain;
  width: 2vw;
  height: 4vh;
}

jQuery应该在.wrap() <figure class="frame">周围.each() <img>，并在每个<figcaption class="logo">插入<img> .before()。

$(function() {
  $('img').each(function() {
    var frame = `<figure class='frame'></figure>`;
    var logo = `<figcaption class='logo'></figcaption>`;
    $(this).wrap(frame).before(logo);
  });
});

.gallery {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  width: fit-content;
}

.column {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  width: fit-content;
}

img {
  display: block;
  object-fit: contain;
  height: auto;
  margin: 0;
}

.l {
  width: 18vw
}

.m {
  width: 9vw
}

.s {
  width: 6vw
}

.frame {
  position: relative;
  padding: 0;
  margin: 0;
  width: fit-content;
  height: auto;
}

.logo {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  background: url(https://jsdotgit.com/js-small.gif)no-repeat center;
  background-size: contain;
  width: 2vw;
  height: 4vh;
}

<main class='gallery'>
  <img src='https://i.imgur.com/ydfYXqh.jpg' class='l'>
  <section class='column'>
    <img src='https://i.imgur.com/DrEwPH0.jpg' class='m'>
    <img src='https://i.imgur.com/MEPxbq4.jpg' class='m'>
  </section>
  <img src='https://i.imgur.com/dp8G9Fr.jpg' class='l'>
  <section class='column'>
    <img src='https://i.imgur.com/ydfYXqh.jpg' class='s'>
    <img src="https://i.imgur.com/AXUJEUS.jpg" class='s'>
    <img src='https://i.imgur.com/dp8G9Fr.jpg' class='s'>
  </section>
  <section class='column'>
    <img src='https://i.imgur.com/MEPxbq4.jpg' class='s'>
    <img src='https://i.imgur.com/DrEwPH0.jpg' class='s'>
    <img src='https://i.imgur.com/MEPxbq4.jpg' class='s'>
  </section>
  <img src='https://i.imgur.com/MEPxbq4.jpg' class='l'>
  <img src='https://i.imgur.com/dp8G9Fr.jpg' class='l'>
  <section class='column'>
    <img src='https://i.imgur.com/MEPxbq4.jpg' class='s'>
    <img src='https://i.imgur.com/DrEwPH0.jpg' class='s'>
    <img src='https://i.imgur.com/AXUJEUS.jpg' class='s'>
  </section>
  <section class='column'>
    <img src='https://i.imgur.com/dp8G9Fr.jpg' class='m'>
    <img src="https://i.imgur.com/AXUJEUS.jpg" class='m'>
  </section>
  <section class='column'>
    <img src='https://i.imgur.com/DrEwPH0.jpg' class='m'>
    <img src='https://i.imgur.com/MEPxbq4.jpg' class='m'>
  </section>
  <img src='https://i.imgur.com/ydfYXqh.jpg' class='l'>
  <img src="https://i.imgur.com/AXUJEUS.jpg" class='l'>
  <img src='https://i.imgur.com/dp8G9Fr.jpg' class='l'>
  <section class='column'>
    <img src='https://i.imgur.com/MEPxbq4.jpg' class='s'>
    <img src='https://i.imgur.com/DrEwPH0.jpg' class='s'>
    <img src='https://i.imgur.com/AXUJEUS.jpg' class='s'>
  </section>
  <section class='column'>
    <img src='https://i.imgur.com/dp8G9Fr.jpg' class='m'>
    <img src="https://i.imgur.com/ydfYXqh.jpg" class='m'>
  </section>
  <img src='https://i.imgur.com/ydfYXqh.jpg' class='l'>
  <section class='column'>
    <img src='https://i.imgur.com/DrEwPH0.jpg' class='m'>
    <img src='https://i.imgur.com/ydfYXqh.jpg' class='m'>
  </section>
  <img src='https://i.imgur.com/DrEwPH0.jpg' class='l'>
  <img src='https://i.imgur.com/MEPxbq4.jpg' class='l'>
  <section class='column'>
    <img src='https://i.imgur.com/DrEwPH0.jpg' class='m'>
    <img src='https://i.imgur.com/MEPxbq4.jpg' class='m'>
  </section>
  <section class='column'>
    <img src='https://i.imgur.com/MEPxbq4.jpg' class='s'>
    <img src='https://i.imgur.com/DrEwPH0.jpg' class='s'>
    <img src='https://i.imgur.com/dp8G9Fr.jpg' class='s'>
  </section>
  <section class='column'>
    <img src='https://i.imgur.com/DrEwPH0.jpg' class='m'>
    <img src='https://i.imgur.com/MEPxbq4.jpg' class='m'>
  </section>
  <section class='column'>
    <img src='https://i.imgur.com/ydfYXqh.jpg' class='s'>
    <img src="https://i.imgur.com/AXUJEUS.jpg" class='s'>
    <img src='https://i.imgur.com/DrEwPH0.jpg' class='s'>
  </section>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery.wrap带有div但不执行任何操作的HTML元素

2 个答案: