如何使用jQuery在另一个图像上显示图像

因此，在第一次参加本地编码俱乐部会议后，我开始重新研究jQuery，并尝试复制其中一位发言人所谈论的内容。我已经对问题的总体思路做好了，只是我似乎无法使图像（即被光标悬停）出现在未被悬停的图像上。我认为调整z-索引将有助于否定这一点，但似乎没有任何工作。如何使用jQuery在另一个图像上显示图像

我已经将文件等上传到http://www.downloadthatmovie.com/jquery/，这里是页面的源代码：

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>jQuery Animation 3</title> 
<style type="text/css"> 
    .imgOpa 
    { 
     height:200px; 
     width:200px; 
     opacity:0.5; 
     filter:alpha(opacity=50); 
     z-index:0; 
    } 
    article{ 
     padding:20px; 
    } 

    img{ 
     z-index:0; 
    } 
</style> 

<script type="text/javascript" src="jquery-1.6.4.min.js"></script> 

</head> 

<body> 

<article> 
    <p> 
    <img class="imgOpa" src="img/image1.jpg" alt="Image 1" /> 
    <img class="imgOpa" src="img/image2.jpg" alt="Image 1" /> 
    <img class="imgOpa" src="img/image3.jpg" alt="Image 1" /> 
    <img class="imgOpa" src="img/image4.jpg" alt="Image 1" /> 
    <img class="imgOpa" src="img/image5.jpg" alt="Image 1" /> 
    </p> 
</article> 

<script type="text/javascript"> 
$(function() { 
$('.imgOpa').each(function() { 
$(this).hover(
function() { 
$(this).stop().animate({ "opacity": 1.0, "margin-top":0, "margin-right":0, "margin-right":-50, "z-index":999, "height":250, "width":250 }, 100); 
    }, 
function() { 
$(this).stop().animate({ "opacity": 0.5, "margin-top":0, "margin-right":0, "margin-right":0, "z-index":1, "height":200, "width":200 }, 100); 
    }) 
    }); 
}); 
</script> 

</body> 
</html>

的图像表现，现在可能看起来奇怪，但我只是测试的几件事情的方式在我解决更大的问题之前。正如我前面所说，我想让光标悬停的图像位于其他图像之上。自从我上次碰到jQuery以来，已经过去了4个月，但终于将自己踢了起来，并重新认识了自己。

大家欢呼！

来源

2012-03-11 Rob

This SO thread指出我在this post堆叠上下文。刚刚从sitepoint z-index reference page添加

.imgOpa 
{ 
    position: relative; 
}

来源

2012-03-11 06:25:51

为帮助卡林达里干杯，我有时会忘记相对定位。无论如何，这修复了它:)。 – Rob 2012-03-11 06:34:21

：[z索引]指定的箱，其位置值是绝对一个，固定，或相对的叠层水平。

来源

2012-03-11 06:33:58

如何使用jQuery在另一个图像上显示图像

回答

相关问题