Question

我在我的网站上遇到了一些jQuery魔法......我希望在代码中添加一个DIV，我的DIV大小与图像大小相同 - 而不是图像响应，所以当图像改变大小时，DIV也应该......

我采用下面的方法 - 但是它使所有DIV的尺寸与最后一张图像相同，而不是位于每张图像上方的图像......

我的代码到目前为止：

function placeImageOverDIVFX () {
    $('.projectContentWrapper img').before('<div class="projectContentWrapperOverlayDIV"></div>');
}

placeImageOverDIVFX();
$(window).load(function() { placeImageOverDIVFX(); });

function sizeupImageInnerFX () {
    $('.projectContentWrapper img').each(function () {
        var contentWrapperImageWidth = $(this).width();
        var contentWrapperImageHeight = $(this).height();

        function setSizes () {
            $('.projectContentWrapperOverlayDIV').each(function () {
                $(this).width(contentWrapperImageWidth);
                $(this).height(contentWrapperImageHeight);
            });
        }

        setSizes();
    });
}

sizeupImageInnerFX();

$(window).load(function() { sizeupImageInnerFX(); });
$(window).resize(function() { sizeupImageInnerFX(); });

关于如何在每个“projectContentWrapperOverlayDIV”DIV正下方制作特定于图像的DIV尺寸的任何想法？

下面的HTML标记示例：

<div class="projectContentWrapper">

<img src="assets/images/work/01/01.jpg">
<img src="assets/images/work/01/02.jpg">
<img src="assets/images/work/01/03.jpg">

</div>

Answer 1

我认为你只是有一个逻辑问题。这个.each()块可以抓取每张图像的宽度/高度，非常棒！我认为这个代码很好。

$('.projectContentWrapper img').each(function () {
    var contentWrapperImageWidth = $(this).width();
    var contentWrapperImageHeight = $(this).height();
    setSizes();
});

然而，当你去改变div的大小时，你实际上是在迭代每个div，而不仅仅是你图像上方的div。

function setSizes () {
    $('.projectContentWrapperOverlayDIV').each(function () {
        $(this).width(contentWrapperImageWidth);
        $(this).height(contentWrapperImageHeight);
    });
}

第一次通过图像循环时，所有具有.projectContentWrapperDIV类的div将更新为第一个图像宽度/高度。第二次，它将覆盖第一个循环更改并将所有div更新为第二个图像宽度/高度。这一直重复到最后一个图像，这就是为什么所有的div似乎都继承了最后的图像宽度/高度。

您需要专门访问图像上方的单个div。你没有任何HTML标记，所以我不能给你具体细节，但jQuery的parent()和closest()可能会帮助你找到它。如果您发布HTML标记，我们可能会让您更好地了解如何解决它。

Answer 2

你正在不必要地进行计算。如果我理解你（在图像上添加div），可以使用CSS轻松完成。查看我的示例并根据需要进行调整。

.imager {
  width: 150px; /* Adjust as Needed */
  height: 150px; /* Adjust as Needed */
  display: inline-block;
  position: relative; /* Helps curatil overlap */
  overflow: hidden;  
}


.imager:before {
  content: "IMG";
  width: 100%;
  height: 100%;
  position: absolute;
  background: black;
  z-index: 9;
  top: 0;
  left: 0;
  opacity: .4;
}


/* For the text "IMG" */

.imager:after {
  content: "IMG";
  height: 100%;
  width: 100%;
  line-height: 150px;
  text-align: center;
  top: 0;
  position: absolute;
  font-weight: bold;
  font-size: 36px;
  color: red;
  
  }

/* IMG Block ends here */




/* Image control starts below */

.imager img {
  width: 100%;
  heihgt: auto;
  margin: 20px 10px 0 10px;
}

<div class="imager"><img src="http://i41.tinypic.com/14iiyoy.jpg" border="0" alt="Image and video hosting by TinyPic"> </div>

<div class="imager"><img src="http://i41.tinypic.com/14iiyoy.jpg" border="0" alt="Image and video hosting by TinyPic"> </div>

<div class="imager"><img src="http://i41.tinypic.com/14iiyoy.jpg" border="0" alt="Image and video hosting by TinyPic"> </div>

<div class="imager"><img src="http://i41.tinypic.com/14iiyoy.jpg" border="0" alt="Image and video hosting by TinyPic"> </div>

Answer 3

如果我理解正确的问题，这是一个想法。为了在流体图像调整大小时稍后调整DIV的大小，我根据它的图像索引给每个div一个ID。

$( window ).load((function() {
    $('.projectContentWrapper img').each(function (index) {
        var imageWidth = $(this).width();
        var imageHeight = $(this).height();
        var newDiv = $("<div class='projectContentWrapperOverlayDIV'></div>");
        $(newDiv).width(imageWidth);
        $(newDiv).height(imageHeight);
        $(newDiv).attr("id", "overlay_"+index);
        $(this).before(newDiv);
    }
}

$( window ).resize(function() {
    $('.projectContentWrapper img').each(function (index) {
        var imageWidth = $(this).width();
        var imageHeight = $(this).height();
        $("#overlay_"+index).width(imageWidth).height(imageHeight);
    }
}

如果图像有ID，那就更好了。只需使用：

$(newDiv).attr("id", "overlay_" + this.id );

//当然没有经过测试。

在每张图像上方添加一个DIV，其大小与其下方的图像相同

3 个答案: