0

我没有 javascript 或 jquery 的技能。所以我试图尽我所能解决这个问题。

我目前使用 jQuery 1.9.1。

我想要做的是，当点击顶部图像时解包或解开一堆图像（当再次点击它时它当然必须重新打包）......

图像的定位就像在图像中一样，使用 css :nth-child()...

这是我对 jQuery 的尝试：

    $(document).ready(function(){

        var $profile = $('.profile');
        $profile.click(function(){

            $(this).toggleClass("active");
            $(".thumb").children().eq(1).animate({left:'150px'});
            $(".thumb").children().eq(2).animate({left:'150px'});
            $(".thumb").children().eq(3).animate({left:'150px'});
            $(".thumb").children().eq(4).animate({left:'150px'});
            $(".thumb").children().eq(5).animate({left:'150px'});
            $(".thumb").children().eq(6).animate({left:'150px'});
            $(".thumb").children().eq(7).animate({left:'150px'});
            $(".thumb").children().eq(8).animate({left:'150px'});
            $(this).siblings(".user-info").toggleClass("active");       

        });
    });

我已经尝试了三天来几乎学习 jquery 来完成这项任务，如果有人可以帮助我，我将不胜感激！

这是它的样子

这是一个更好地说明的图像

4

1 回答 1

0

您可以实现此目的的一种方法：

HTML：

<div>
    <img src="http://rowanpereira.com/test/test/img/person1/1.jpg" alt="" class="stacked" />
    <img src="http://rowanpereira.com/test/test/img/person1/1.jpg" alt="" class="stacked" />
    <img src="http://rowanpereira.com/test/test/img/person1/1.jpg" alt="" class="stacked" />
    <img src="http://rowanpereira.com/test/test/img/person1/1.jpg" alt="" class="stacked" />
</div>

CSS：

div
{
    width: 100%;
    height: 80px;
    overflow: scroll-x;
}

img 
{
    width: 80px;
    height: 80px;
}
.stacked
{
    position: absolute;
}

.unstacked
{
    display: inline;
}

Javascript：

$(function() {
    $("img").hover(function () {
        $("img").animate().toggleClass("stacked", "unstacked");
    });
});

在这里检查：http: //jsfiddle.net/TdNz4/

这只是一个示例，当然您需要对其进行调整以适合您的设计。

于 2013-07-16T12:54:02.477 回答