javascript - 单击图像时的 Jquery 叠加

Question

jquery 不是最好的，有人可以建议一个通用的方法来实现我想要实现的目标吗？我有一个照片网格，当它们被点击时，一个不透明的覆盖层将在整个图片之上动画化，覆盖层将包含一些动态设置的文本。我有图像和 onclick 处理程序，只是想找出应用覆盖的最佳方法。谢谢

Answer 1

语义上不是很漂亮，但应该完成工作:假设您的 imgs 是 200x200。

<div class='imgcontain'>
<img src='yourimg' alt='' width='200' height='200'>
<p>Your text>/p>
</div>

<div class='imgcontain'>
<img src='yourimg' alt='' width='200' height='200'>
<p>Your text>/p>
</div>

<div class='imgcontain'>
<img src='yourimg' alt='' width='200' height='200'>
<p>Your text>/p>
</div>

//等...

然后，CSS :

.imgcontain
{
position: relative;
width: 200px;
height: 200px;
overflow: hidden; // not sure you want to makes the overlay just show or slide from top. This is useful only if it should slide.
}

.imgcontain img
{
position: absolute;
width: 200px;
height: 200px;
top: 0px;
left: 0px;
z-index: 2;
}

.imgcontain p
{
position: absolute;
display: block;
width: 200px;
height: 200px;
top:  0px; // if slide from top, -200px
left: 0px;
background: rgba(0,0,0,0.5) // or a background image like a transparent png with repeat
z-index: 1;
}

.imgcontain:hover p
{
z-index: 3; // if slide from top, top: 0px
}

这是一个纯 CSS 解决方案，没有动画，适用于使用 Javascript 的用户。

如果你想使用 Jquery 动画:

$(.imgcontain p).hide().css('z-index','3'); // on ready, hide the overlay. Maybe throw the .css() in callback.

然后，点击/鼠标悬停

$(.imgcontain).click(function()
{
$(.imgcontain p).show();
});