Javascript 向下滑动类似于谷歌图像结果
我正在尝试做一些类似于谷歌在图像搜索结果中使用的滑动功能 在这个jsFiddle中,我有一些工作: 使用jQuery:Javascript 向下滑动类似于谷歌图像结果,javascript,jquery,css,google-image-search,Javascript,Jquery,Css,Google Image Search,我正在尝试做一些类似于谷歌在图像搜索结果中使用的滑动功能 在这个jsFiddle中,我有一些工作: 使用jQuery: $(document).ready(function () { $('.slider').click(function (e) { e.preventDefault(); $('.internal').slideUp('normal'); if ($(this).next().is(':hidden') === true
$(document).ready(function () {
$('.slider').click(function (e) {
e.preventDefault();
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
});
$('.internal').hide();
});
但我不知道如何得到它,所以与图像相关的内容就在它下面
我确实找到了这个链接:
但当它与同位素结合时,会引起一些问题。所以,我正试着自己动手,看看我是否能达到类似的效果,在用同位素过滤时也能奏效
不太确定是否需要在CSS中设置不同的内容,或者是否需要使JS命令不同。为什么不将内容放在滑块中,在图像之后。他们属于一起,所以把他们分组是有意义的。这也会使你的问题(和js)变得容易得多。看看这个:
html现在看起来是这样的:
<div class="slider">
<img src="..." />
<div class="internal">Content here</div>
</div>
谢谢但是我试图从视觉上看到的是类似的东西:唯一的问题是它与同位素有冲突,因为某些原因。现在问这个问题已经太迟了。但是你找到解决这个问题的方法了吗?甚至我也被困在同一个点上,定位和浮动互相碰撞!任何帮助或提醒都会很棒@Ajasra-我从来没有真正回到过这一点,但在看了之后,你可能会想按照Pervara的建议,将所有内容保留在一个特定的div中,而不是将其分开。这样你可以保持所有的位置不变。谢谢你的忍者回来。但是Pevara的解决方案适用于JSFIDLE,但不适用于实际问题,因为您正处于同位素和codrops插件之间的位置战中。嗯,我正试着自己写出来……让我们看看会发生什么。如果我有一个具体的解决方案,我会为新的读者更新。
$('.slider').click(function () {
$(this).find('.internal').slideToggle();
});