1

我在使用图片库时遇到了一些问题。为了实现翻转效果，我有这个 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;
}

知道为什么会这样吗？

4

1 回答 1

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);
        }       
    );
于 2013-02-26T18:12:46.883 回答