Question

我在这里创建了一个尝试解决这个问题的方法： http://jsfiddle.net/oca3L32h/

我有3个div包含在主div中。这三个div每个都包含一个图像，它们相互重叠。我有3个单选按钮，用于决定查看器可以看到哪个div（每个单选按钮隐藏2个div并使剩余的div可见）。

我正在尝试制作一个Javascript函数，只要我的页面加载就会使用AJAX查询我的数据库，如果Javascript收到“0”作为响应，那么我希望特定图像以50％不透明度出现在所有3个div（这样如果观众点击单选按钮，他们仍会看到3个不同的图像，但是会有另一个半透明的图像出现在它们的顶部（这个半透明图像也会阻止观看者）与下面的原始图像交互。）

出于测试目的，我创建了一个“Click me”按钮，它将触发Javascript函数（因为我无法在jsfiddle中执行数据库检查），但我无法获得所需的结果。< / p>

这是我的Javascript功能：

//function to show transparent image
function ShowTransparentImage(){

//fade out firstDIV, secondDIV and thirdDIV by 50%
document.getElementById("firstDIV").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");
document.getElementById("secondDIV").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");
document.getElementById("thirdDIV").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");

//fade in masterDiv's image with 50% opacity
document.getElementById("masterDIV.background-image").setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");

};

我不确定隐藏/显示与其他图像重叠的图像的规则是什么。我试图通过从Javascript函数中更改所有4个div的CSS来做到这一点，但我没有成功。

如果无法将3个div的不透明度降低到50％，同时将主div的图像的不透明度增加到50％，那么是否可以使3个div中的图像不可见（或100％透明）同时使主div的图像可见？

对此有任何帮助或建议将非常感谢，提前谢谢！

Answer 1

尝试使用.background-image ShowTransparentImage`

从document.getElementById("masterDIV.background-image")删除.click() to call

$('.radio input').on('click', function(){
    //Hide all image divs
    $imageDivs.css({'display':'none', opacity:1});
    $("#masterDIV").css({zIndex:0})
    //Then display the image div we want to see
    //To find that out we'll get the id of the current radio button
    var radioID = $(this).attr('id');

    //And then we'll display that image div
    $('#' + radioID + 'DIV').css('display','block'); 
});

//function to show transparent image
$("button").click(function ShowTransparentImage(){

  //fade out firstDIV, secondDIV and thirdDIV by 50%
  document.getElementById("firstDIV")
  .setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");
  document.getElementById("secondDIV")
  .setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");
  document.getElementById("thirdDIV")
  .setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)");

  //fade in masterDiv's image with 50% opacity
  document.getElementById("masterDIV")
  .setAttribute("style","opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50);z-index:2");   
});

CSS

#masterDIV{
    opacity:0;
    width:400px;
    height:400px;
     position: absolute;
    background-image: url(https://jonathanhult.com/blog/wp-content/uploads/2013/06/padlock.png);
}

jsfiddle http://jsfiddle.net/oca3L32h/5/

Answer 2

更新：这是一个更新的jsFiddle，其中添加了淡化效果。

根据我的理解，您希望显示三个图像中的一个，由用户通过单选按钮控制。然后还有一个半透明图像与其他图像重叠显示，由一些额外的JavaScript控制。

这是实现这一目标的不同方法。不是每次都通过JS改变一堆样式，而是在元素中添加/删除一个类通常更好，而在CSS中只需要更多的规则。

以下是jsFddle，下面粘贴的代码以防万一。

HTML：

<div><input class="transparentImageToggleButton" type="button" value="Toggle Transparent Image" /></div>
<div><input class="radio" type="radio" name="thing" value="0" checked />Image 0</div>
<div><input class="radio" type="radio" name="thing" value="1" />Image 1</div>
<div><input class="radio" type="radio" name="thing" value="2" />Image 2</div>

<div class="masterDiv">
    <div class="imageDiv active">
        <img src="http://lorempixel.com/g/400/400/sports" />
    </div>
    <div class="imageDiv">
        <img src="http://lorempixel.com/g/400/400/food" />
    </div>
    <div class="imageDiv">
        <img src="http://lorempixel.com/g/400/400/nature" />
    </div>
    <img class="masterImage" src="http://placehold.it/400x400?text=master+image" />
</div>

CSS：

.masterDiv {
    position: relative;
}

.imageDiv {
    display: none;
}

.imageDiv.active {
    display: block;
}

.masterImage {
    display: none;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
}

.masterImage.active {
    display: inline;
}

JS（使用jQuery）：

$('.transparentImageToggleButton').on('click', function() {
    $('.masterImage').toggleClass('active');
});

$('.radio').on('click', function() {
    $('.imageDiv').removeClass('active').eq($(this).val()).addClass('active');
});

淡出儿童div图像＆amp;使用Javascript淡化重叠的父div图像

2 个答案: