Question

在第一次加载时以及每次调整窗口大小时尝试将响应图像的高度复制到我的蒙版时遇到问题。我尝试了几个js脚本，但我仍然无法实现它。

它实际上是一个响应式图像滑块，无论视口屏幕大小如何，都在其上方有一个div（蒙版）。

这是我的jQuery脚本：

function maskInit(){
   var offsetDots = $("#slide").offset().top + $("#slide").height() + "px";
   $("#mask").height() = offsetDots;  
}
$(document).ready(function() {
maskInit(); 
});
$(window).resize(function(){
    maskInit();
});

和我的CSS：

#slide{
    height: 10vw; /* to simulate a responsive image */
    width: 100%;
    margin: 0;
    padding: 0;
    background: red;
    z-index: 0;
}
#mask{    
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    background: gray;
    opacity: 0.8;
}

I've setup a jsFiddle here to simulate my problem

Answer 1

你的剧本有问题。

您不设置遮罩高度：

$("#mask").height() = offsetDots;

检查jQuery .height()

而是以这种方式使用它：

$("#mask").height(offsetDots);

或者您可以通过css设置：

$("#mask").css({"height":offsetDots});

Here's your updated jsFIDDLE demo

Answer 2

.height()是一项功能，因此您无法$("#mask").height() = offsetDots;使用$("#mask").height(offsetDots);或.css({"height":offsetDots})来设置身高。

根据响应图像更改遮罩高度

2 个答案: