如何在jquery中单击时更改z元素的索引?

时间:2014-03-26 23:18:23

标签: javascript jquery html css z-index

我想在按钮点击时更改z-Index。我有一个静态图像和一个动态div。现在我想在静态图像后面发送#imgDiv1。但我不知道该怎么做。我尝试了一切,但都徒劳无功。

这是现场演示。 jholo.com我想在此Web应用程序中实现此概念。

这是我的标记

<div id="safeZone">
    <img src="default.png" />

    <div id="imgDiv1">
         <img src="myPic.jpg" />
    </div>

</div>

<input id="back" type="button" value="Send To Back"/>
<input id="front" type="button" value="Bring To Front"/>

的jQuery

 $(document).ready(function(){ 

   $("#back").click(function(){
      $("#imgDiv1").css("z-index","-10");
   });

   $("#front").click(function(){
      $("#imgDiv1").css("z-index","10");
   });

});

This is what i want

2 个答案:

答案 0 :(得分:5)

z-index样式属性仅对不是position: static的元素产生影响。因此,您需要先设置position属性,然后才能看到z-index的影响。

HTML:

<button id="up">Up</button><button id="down">Down</button>
<div id="container">
    <img id="img1" src="http://dummyimage.com/300x200/ff0000/fff.jpg">
    <img src="http://dummyimage.com/300x200/00ff00/fff.jpg">
</div>

CSS:

#container img {position: absolute;}
#container {height: 200px; width: 300px;}

代码:

$("#up").click(function(){
     $("#img1").css("z-index", -10);
  });

$("#down").click(function(){
    $("#img1").css("z-index",10);
});

工作演示:http://jsfiddle.net/jfriend00/5Efm3/


编辑 - 回复您的其他修改:

为了达到你想要的效果,你还需要雪花般的图像在雪花形状内部具有透明度,从而允许后面的图像显示通过哪个意味着它不能是JPG。它可能是GIF或PNG。

答案 1 :(得分:0)

我使用了不透明度而不是z-index ...这有用吗?

$("#down").click(function(){
 $("#img1").css("opacity", 0.0);
$("#img2").css("opacity", 1.0);
  });

$("#up").click(function(){
$("#img2").css("opacity",0.0);
$("#img1").css("opacity", 1.0);
});

js小提琴链接是.. http://jsfiddle.net/6rwBR/希望这有助于