使用 Javascript 淡出子 div 图像和淡入重叠的父 div 图像

Question

我创建了一个 jsfiddle 来尝试解决这个问题： http://jsfiddle.net/oca3L32h/

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

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

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

这是我的 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

更新：这是一个更新的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');
});

Answer 2

尝试从 document.getElementById("masterDIV.background-image") 中删除 .background-image，使用 .click() to callShowTransparentImage`

$('.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/