我想在按钮点击时更改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");
});
});
答案 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/希望这有助于