Jquery 如何动态更改照片的z索引？

我想更改我绝对定位在身体元素中的一组照片中图像的

z-index

。我希望这样，当我滚动图像时，它会使用CSS中的WebKit转换增大大小

问题是，在我的HTML文件堆栈中，图像的顺序越高，图像的顶部越低。我希望有一个脚本，它可以增加文件的

z索引

，这样当我滚动文件时，它就不会出现在相邻照片的后面

我花了一些时间寻找

z-index

添加文件，因为在我的脑海中，你只是用jquery文件不断地将

z-index

增加到无穷大，但我不知道如何编码

基本上，我想要一组彼此靠近的照片，当它们的尺寸增大时，不会相互重叠

---

这可行吗？

使用CSS，例如：

.photo_group .photo:hover {
    z-index: 1000; /* May depend on over indices defined! */
}

如果您需要确切的CSS规则/类名，请发布一些HTML。这只是一个样本。

像这样吗？：

  <style>
  img{
      position:absolute;
  }
  img.apple{
      top: 40px;
      left: 0px;
  }
  img.ipod{
      top: 50px;
      left: 50px;
  }
  img.thanks{
      top: 0px;
      left: 0px;
  }
</style>


<script type="text/javascript">
function increaseZIndex(obj){
    obj.style.zIndex = 1;
}
function decreaseZIndex(obj){
    obj.style.zIndex = 0;
}
</script>
<img src='http://images.apple.com/home/images/billboard_25b_thankyou_headline_Yr4p8DedLk7y.png' onmouseover='increaseZIndex(this);' onmouseout='decreaseZIndex(this);' class='thankyou'/>
<img src='http://edibleapple.com/wp-content/uploads/2009/04/silver-apple-logo.png' onmouseover='increaseZIndex(this);' onmouseout='decreaseZIndex(this);' class='apple'/>
<img src='http://www.ipod.org.uk/ipod_nano.jpg' onmouseover='increaseZIndex(this);' onmouseout='decreaseZIndex(this);' class='ipod' />​​​​​​​​​​​​​​​​​​​​​​​​​​​

img{
位置：绝对位置；
}
苹果{
顶部：40px；
左：0px；
}
img.ipod{
顶部：50px；
左：50px；
}
谢谢{
顶部：0px；
左：0px；
}
函数增量zindex（obj）{
obj.style.zIndex=1；
}
函数递减指数（obj）{
obj.style.zIndex=0；
}
​​​​​​​​​​​​​​​​​​​​​​​​​​​

---

请发布一些代码。CSS转换将对z索引产生影响，正如定位一样。看，我会试试看，这是有道理的。