1

我正在尝试创建类似于以下网站的内容

基本上我所追求的是使用同位素来创建一个包含大量缩略图的投资组合页面。一旦用户将鼠标悬停在缩略图上，将出现（淡入）标题覆盖，然后当用户单击缩略图时，将出现照片的大版本。布局将重新排列。

到目前为止，我已经设法使用几个插件来分别实现效果......换句话说，我使用 Mosiac.js 来实现悬停效果和 Isotope.js 来实现布局。你可以看到我目前在马赛克.html和isotope.html上的内容

我被困住了。我不知道如何结合这两种解决方案。我尝试过使用 CSS 类并稍微使用 jQuery。我是 jQuery 新手 :(

请帮忙！

如果您需要更多信息或问题不清楚，请告诉我

4

2 回答 2

2

像这样简单的事情不需要使用mosaic.js。首先，让您的网站在功能方面使用 Isotope；不用担心那个阶段的设计微调。然后，只需在 Isotope 元素中嵌套一些带有覆盖标题的 div，并默认隐藏它们。将悬停事件附加到 Isotope 元素，显示隐藏的 div，并在查看者的鼠标悬停在 Isotope 元素上时显示它们。

但请记住，使用移动触摸屏设备的人不会看到您的悬停效果...

HTML

<div class="item">
    // content of the Isotope .item
    <div class="overlay">
        // content of the overlay
    </div>
</div>

CSS

.overlay {
    display: none;
    /* other rules to style the overlay */
}

jQuery

$(".overlay").hover(function(){
    $(this).filter(':not(:animated)').animate({ whatever you like to animate });
        }, function() {
    $(this).animate({ whatever you like to animate });
});

另请参阅jQuery fadeToggle()和jQuery animate()方法以及 show()、hide() 等方法，了解您可能希望在悬停时实现的效果。

于 2012-10-04T15:53:54.717 回答
0

我有完全相同的，无法弄清楚为什么我不能将它们结合起来。马赛克需要高度，而同位素具有这种动态。所以我使用：

$('.mosaic-block').each(function (index) {
    $(this).height($(this).find(".mosaic-backdrop").height());
});

但是 Isotope 仍然有物品放在它上面，并且标题仍然不起作用。但是，如果您想坚持使用 Mosaic，这可能会为您指明正确的方向。我要将我的代码转换为@Systembolagnet 的解决方案。请接受他的回答

于 2012-12-04T10:58:01.710 回答