Question

我试图制作一个画廊类的东西，但只有3个瓷砖 - 一个大，两个小（相同大小） - 当你将鼠标悬停在其中一个瓷砖上时，我希望它能够展开如附图所示，它变大，另外两个变小。我记得我已经在某个地方见过这个但却无法找到它。有人可以帮忙吗？

也许有一个现成的插件，或者任何人都知道如何做到这一点。

谢谢！

http://i.stack.imgur.com/iHxWG.png

Answer 1

也许是这样的： http://jsfiddle.net/7ALNj/ 可能是一个好的开始......你必须调整宽度/高度才能获得理想的效果，但我会说它非常接近。 ..

$( ".tile-big" ).hover(
function() {
$( this ).stop().animate({width:"70%"});

$('.tile-small').stop().animate({width:"29%",height:'49%'});
}, function() {
$( this ).stop().animate({width:"60%"});

$('.tile-small').stop().animate({width:"39%"});
}
);

$( ".first" ).hover(
function() {
$( this ).stop().animate({width:"45%",height:"60%"});
$('.last').stop().animate({width:"45%",height:"39%"});


$('.tile-big').stop().animate({width:"54%"});
}, function() {
$( this ).stop().animate({width:"39%",height:'49%'});
$('.last').stop().animate({width:"39%",height:"49%"});

$('.tile-big').stop().animate({width:"60%"});
}
);

$( ".last" ).hover(
function() {
$( this ).stop().animate({width:"45%",height:"60%"});
$('.first').stop().animate({width:"45%",height:"39%"});


$('.tile-big').stop().animate({width:"54%"});
}, function() {
$( this ).stop().animate({width:"39%",height:'49%'});
$('.first').stop().animate({width:"39%",height:"49%"});

$('.tile-big').stop().animate({width:"60%"});
}
);

你可以检查小提琴中的html / css（可能更好，但这也有效......）

是否有一个jQuery插件用于在悬停时调整瓦片的大小限制在一个盒子里？

1 个答案: