-1

假设有一个具有多种样式等的复杂网站。该网站上也有许多图像可以定位、内联、块或其他。

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

第一次尝试是position:absolute span在正文末尾为每个图像创建一个图像图标并将其移动到图像上。问题：如果网站上的某些内容移动、隐藏或显示，则图像可能也会移动，但图标叠加层会保留，因此图标将不再位于图像上方。

因此，我想使用jQuery.wrap将每个图像包装在一个 div 中，position:relaitve然后我将图标叠加层也放在该 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;
}
4

2 回答 2

0

不要使用块级元素，它可能会扰乱您的 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" />')
        )
    );
});

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

于 2012-12-10T23:51:48.133 回答
0

在 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() a <figure class="frame">around .each() <img>并插入一个<figcaption class="logo"> .before() each <img>。

$(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>

于 2019-04-23T21:52:24.743 回答