我得到了一些很好的帮助来完成这项工作的基本部分,但现在我再次需要帮助:(下面的javascript应该是这样的,当你把鼠标悬停在图库中的缩略图上时,缩略图就会放大。我增加了高度和宽度,但我也改变了顶部和左侧的偏移来进行补偿,使其看起来像是图片相对于缩略图的中心在放大,而不是向右下角延伸。
jQuery('.videogall-thumb').hover(function() {
var currThumb = jQuery(this).attr('id');
jQuery('.videogall-thumb[id="' + currThumb +'"]').stop().animate({height: "100", width: "118", left: "-12", top: "-15"}, "fast");
}, function() {
jQuery('.videogall-thumb').stop().animate({height: "83", width: "98", left: "0", top: "0"}, "fast");
}
);
至少这是我所希望的。但缩略图仍然在向外延伸,而不是从中心放大。此外,正在放大的缩略图最终位于行上相邻缩略图的下方,而不是位于它们的上方,并且它会推送下面行上的相邻缩略图。明白我的意思了:http://oneworldyouthproject.org/tubepress-test/
我错过了什么?
您需要将position: relative
设置为img
元素,才能使left
和top
定位工作。