0

我很抱歉成为这样的菜鸟,但是在编程方面我遇到了很多困难,所以如果有人可以提供帮助,那就太好了!

基本上,我正在尝试使用一些图像制作一个 zindex,当我单击它切换图像的按钮时,我想要这些图像。我知道这可能是非常基本的,但我很不知道该怎么做。我理解这个概念,但无法输入。

我也试图让图像位于页面中间。我被推荐到以下;然而,这并没有奏效。有人可以帮忙吗?

这是我所拥有的:

CSS

#xbone {
    position:absolute;
    left:0px;
    top:0px;
    margin-left: auto;
    margin-right: auto;
    z-index:-1
}
#ps4 {
    position:absolute;
    left:0px;
    top:0px;
    margin-left: auto;
    margin-right: auto;
    z-index:-2
}
#wiiu {
    position:absolute;
    left:0px;
    top:0px;
    margin-left: auto;
    margin-right: auto;
    z-index:-3
}

JavaScript

function changeStackOrder() {
    document.getElementById("xbone").style.zIndex="1";
}

HTML

<img id="xbone" alt="Xbox One" width="800" height="600"
     src="http://assets1.ignimgs.com/vid/thumbnails/user/2013/06/19/XboxOne1.jpg">
<img id="ps4" alt="Playstation 4" width="800" height="600"
     src="http://www.nowgamer.com/siteimage/scale/0/0/360062.jpg" >
<img id="wiiu" alt="Wii U" width="800" height="600"
     src="http://venturebeat.files.wordpress.com/2013/07/wii-u.jpg" >
<input type="button" onclick="changeStackOrder()" value="Change stack order">

JsFiddle:http: //jsfiddle.net/GkGJw/

4

2 回答 2

0

它没有改变,因为将 xbone 的 zIndex 设置为 1 仍然使其位于顶部。如果您要对任何其他图像执行此操作,它将显示在顶部。

于 2013-10-16T01:08:26.953 回答
0
function changeStackOrder() {
    $("img").each(function() {
        $(this).css("zIndex", "+=1");
        if($(this).css("zIndex") == "0"){
            $(this).css("zIndex", "-3");
        }
    });
}

尝试这样的事情

于 2013-10-16T04:27:15.433 回答