Question

我正在尝试其他所有选项，但我似乎无法解决这个问题。以下是对体验的解释：

访问该页面时，会向该人介绍一些图像（标记有类，例如，其中两个图像标记为img01和img02）。单击图像时，图像保持其位置（img01的z-index上升），而所有其他图像逐渐消失（带有白色填充的DIV淡入并覆盖img02），并且解释该部分的文本也会逐渐消失（DIV标记为object-text，img01的支持文字会逐渐消失。

虽然我可以使用img01功能，但img02似乎无法做到这一点。我还计划添加更多标签（例如img03和img04），并且想知道是否有更智能，更有效的方式可以构建。

有关功能参考，请参阅http://jsfiddle.net/kenhimself/nvwzgus0/4/ 下面是html，css和java代码。

提前致谢！

HTML

<a href="#" id="object" class="img01"> <img class="img01" src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg"/></a>
<div id="object-text" class="img01">
    <h1>img01 Text<br/>img01 Text</h1>
</div>

<a href="#" id="object" class="img02"> <img class="img02" src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg"/></a>
<div id="object-text" class="img02">
    <h1>img02 Text<br/>img02 Text</h1>
</div>

<div id="filler"></div>

CSS

html, body {
    width:100%;
    height:100%;
}
#object {
    top: 100px;
    left:100px;
}
#object-text {
    display:none;
    z-index:100000;
    bottom: 0;
    left: 0;
}
#filler {
    display:none;
    width:100%;
    height:100%;
    position:fixed;
    background-color: white;
    z-index:1000;
    opacity: 0.8;
}
h1 {
    font-size:20px;
    font-family: sans-serif;
    font-weight: 100;
    font-style: normal;
    color: red;
}

.img01, .img02 {
    position:absolute;
}
.img01 img, .img02 img {
    width:200px;
    height:auto;
}
.img01 {
    top: 20px;
    left: 20px;
}
.img02 {
    top: 20px;
    right: 20px;
}

的Javascript

$("#object").click(function (e) {
    e.stopPropagation();
});

$("#object").click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    $("#object").css("z-index", "2000");
    $("#object-text").fadeIn("slow");
    $("#filler").fadeIn("slow");
    $("#inner").css("z-index", "2000");
});

$(document).click(function () {
    $("#filler").fadeOut("slow");
    $("#object-text").fadeOut("slow");
});

Answer 1

我在这里看到的主要问题是你有两个具有相同id的对象。改变这一点，你的代码应该有效。我建议将你拥有的id（对象）转换为类，以及将你所拥有的类（img02和img01）转换为id。

我更多地查看了你的代码，看起来你做的很多。确保在编码时不要重复使用ID ...就像以前一样。你的a和你的div都有重复的id ....

不是卑鄙的，但这确实需要做很多工作。如果您需要更多帮助，请随时提出任何问题。

Answer 2

您的代码存在一些问题。您应该为每个DOM元素使用唯一ID，并按类名定位图像。我对您的示例进行了一些更改，并稍微进行了重组，以向您展示更好的方法。

http://jsfiddle.net/nvwzgus0/6/

将包含标签中的每个图片包裹起来，删除重复的ID并改为使用类名

<a href="#" class="img img01">
    <img class="img01" src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg"/>
    <div class="object-text">
        <h1>img01 Text<br/>img01 Text</h1>
    </div>
</a>

<a href="#" class="img img02">
    <img class="img02" src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg"/>
    <div class="object-text">
        <h1>img02 Text<br/>img02 Text</h1>
    </div>
</a>

<div id="filler"></div>

添加了用于更改z-index而不是手动设置的CSS类，以便更轻松地打开和关闭。

a.top {
    z-index: 2000;
}

修改事件处理以定位包含新标记的内容：

$("a.img").click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).addClass("top");
    $(this).find(".object-text").fadeIn("slow");
    $("#filler").fadeIn("slow");
});

修改了图像z-index的重置方式：

$(document).click(function () {
    $("#filler").fadeOut("slow", function() {
        $("a.img").removeClass("top");
    });
    $(".object-text").fadeOut("slow");
});

为单个图像创建了单击效果，但希望其他图像具有相同的效果

2 个答案: