gpt4 book ai didi

javascript - 在不移动网格的其他行的情况下替换行中的所有 div

转载 作者:行者123 更新时间:2023-11-28 10:19:41 26 4
gpt4 key购买 nike

我有一个 div 的网格。以及所有 position:relative 在其父级中。我需要做的是单击一个 div,该行中的所有 div 都将被隐藏,并且该空间将被第一个 div 和

占用
width = number_of_div_in_one_row * orignal_width

即整行将被用户点击的 div 占据。我尝试了很多很多想法。计算一行中的宽度数并应用 css 动画隐藏每个 div 并增加第一个 div 的宽度。

但每当用户单击任何 div 时,其上方和下方的所有行都会受到干扰。我不要求任何人为我做所有的计算。只是想问一下有没有我可以申请这种场景的 JS/jquery 库。我已经试过了http://nanogallery.brisbois.fr/

但是在这个库中,所有图像都被其他图像集替换了。我只想用一行做这样的事情。

最佳答案

我不知道我是否理解正确你的问题,但在这个 Fiddle有一个每行三个 div 的流体网格。
当您单击一个 div 时,它会变为 100% 宽度,而同一行中的其他 div 将消失。
当你点击有动画的div时,整行会回到起点
您需要的所有代码是

<script type="text/javascript">
$(document).ready(function(){
$('div.element').click(function(){
$(this).toggleClass('go');
if($(this).hasClass('go')){
$(this).animate({'width':'100%'},{
duration:1000,
step:function(gox){
var width = gox < 100 ? (100 - gox) / 2 : 0;
$(this).siblings().css({
'border':'0px',
'width': width + "%"
});
}
})

}else{
$(this).parent('div.row').find('div.element').animate({'width':'33.33%'},1000);
};
});
});
</script>

如果你的行有不同数量的 div,你可以这样做: Fiddle
这些只是简单的例子,希望对您有所帮助。

关于javascript - 在不移动网格的其他行的情况下替换行中的所有 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24083224/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com