Question

我使用marquee标签创建了一个简单的图片库，您可以在以下位置看到它：
http://jsfiddle.net/gunturumanohar/62ZHC/

<marquee id="gallery" behavior="alternative" style="width:700px;padding:6px;" onmouseover="this.stop();" onmouseout="this.start();">
    <img src="http://cssdeck.com/uploads/media/items/0/00kih8g.jpg" />
    <img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
</marquee>

和css是：

#gallery img:hover {
    -webkit-transform: scale(1.5); /*Webkit: increase size to 1.5x*/
    opacity: 1; /*default opacity*/
    z-index: 10; /*place hover image in front the non-hover images*/
}

我使用css比例在悬停时缩放图像，但问题是当图像缩放（缩放）时图像顶部和底部未显示。

我认为问题在于图像的父标记，字幕我怎样才能克服这个问题？

Answer 1

酷概念作为实验，但我建议不要将此方法用于实时网站。虽然marquee得到很好的支持，但不推荐使用（参见 - marquee tag still works, is it okay to use it?）。此外，还有更好的方法来实现更流畅的动画。话虽如此，我已经为你解决了这个问题（接受或留下建议）。

#gallery {
    text-align: center;
    width: 610px;
    margin: -140px auto;
    padding-top: 260px;
    height: auto;
    width:700px;
}
#gallery:hover { height: 270px; }

这是一种黑客行为，但你正在做的事情也是如此，所以我认为这可能还不错。

<强> DEMO

在鼠标悬停时缩放选框标记中的图像

1 个答案: