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();
});

Answer 2

检查此网站可能对您有所帮助。 http://flowplayer.org/tools/overlay/index.html

单击图像时的Jquery叠加

2 个答案: