我在图库中遇到了一些麻烦。为了实现翻转效果,我有这个jQuery脚本:
var gallery=$("#galeria .one-third.column");
var thumbs = $("#galeria .one-third.column a.fancybox img");
for (var c = 0, count = gallery.length; c < count; c++)
{
for (var i = 0, ii = thumbs.length; i < ii; i++)
{
if (thumbs[i].title && thumbs[i].title.length > 0)
{
var imgtitle = thumbs[i].title;
$(thumbs[i]).wrap('<div id="wrapperGal" />').after('<div class=\'caption\'><span class="title">' + imgtitle + '</span></div>').removeAttr('title');
}
}
}
$('#wrapperGal').hover(
function()
{
$(this).find('img').toggleClass("galGrey");
$(this).find('.caption').animate({opacity: "1"}, 300);
},
function()
{
$(this).find('img').removeClass("galGrey");
$(this).find('.caption').animate({opacity: "0"}, 300);
}
);
这样做的目的是找到图库,在图库图像周围应用一个包装器,当鼠标悬停在项目上时,它会变为灰度,并在现有图库拇指的顶部获得一个标题div(带.caption类)。 该图库由9个缩略图组成,脚本将包装和标题应用于所有现有的图库项目,但我只在第一个缩略图上获得悬停效果。
这是图库HTML的示例:
<div class="one-third column alpha">
<a title="t1" class="fancybox" rel="group" href="../img/galeria/big1.jpg"><img src="../img/galeria/thumb1.jpg" title="t1"/></a>
</div>
<div class="one-third column">
<a class="fancybox" rel="group" href="../img/galeria/big2.jpg"><img src="../img/galeria/thumb2.jpg" title="t2"/></a>
</div>
<div class="one-third column omega">
<a class="fancybox" rel="group" href="../img/galeria/big3.jpg"><img src="../img/galeria/thumb3.jpg" title="t3"/></a>
</div>
这就是我所拥有的CSS:
#wrapperGal{
width:288px;
height:210px;
position:relative;
}
#wrapperGal img{
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.galGrey{
-webkit-filter: grayscale(100%);
}
.caption{
height:190px;
position:relative;
top:20px;
opacity:0;
background-image:url(../img/galeria/thumbRoll.png);
}
.caption span.title{
width:288px;
height:190px;
padding-top:157px;
overflow:hidden;
position:absolute;
text-align:center;
}
知道为什么会这样吗?
答案 0 :(得分:0)
因为您使用id
作为包装器的选择器。相同的ID 不能适用于不同的元素。
工作演示:http://jsfiddle.net/indream/QxuPm/
for (var c = 0, count = gallery.length; c < count; c++)
{
for (var i = 0, ii = thumbs.length; i < ii; i++)
{
if (thumbs[i].title && thumbs[i].title.length > 0)
{
var imgtitle = thumbs[i].title;
$(thumbs[i]).wrap('<div class="wrapperGal" />').after('<div class=\'caption\'><span class="title">' + imgtitle + '</span></div>').removeAttr('title');
}
}
}
$('.wrapperGal').hover(
function()
{
$(this).find('img').toggleClass("galGrey");
$(this).find('.caption').animate({opacity: "1"}, 300);
},
function()
{
$(this).find('img').removeClass("galGrey");
$(this).find('.caption').animate({opacity: "0"}, 300);
}
);