0

Chris Antonellis的freezegframe.js插件允许您在鼠标悬停时启动动画 gif。它也有一些不错的东西，比如动画中的淡入淡出。这是启动插件所需的语法：您设置

<script type="text/javascript" src="freezeframe.js"></script>
<script type="text/javascript">
freezeframe = new FreezeFrame();
</script>

在你的头文件中，然后简单地：

<img src="img/mr_div_retro_sphere.gif" freezeframe />

在您的 HTML 正文中。然后可以对图像进行样式设置

figure.freezeframe-container {
    border-radius: 3px;
    border-top: 1px solid __border__;
    border-left: 1px solid __border__;
    width: 100%;
    margin: 0 auto;
    -moz-box-shadow: 5px 5px 3px #888;
    -webkit-box-shadow: 5px 5px 3px #888;
    box-shadow: 5px 5px 3px #888;
}

如文档中所述（请参阅原始链接）。问题是目前没有办法设置背景图像的样式。请参阅此处的测试示例。

从测试中可以看出，背景图片是使用原始 gif 来调整大小的。但是，因为我希望网站在大小方面具有弹性，所以我需要一种方法来调整初始图像的大小。

我联系了作者，但他解释说，困难在于代码当前采用图像的第一帧——似乎不清楚如何将 CSS 样式命令附加到它。

4

1 回答 1

0

这很奇怪，但是让它看起来不错的一个 hacky 方法是：

.freezeframe-container { background-repeat: no-repeat; background-size: 78%; }

但看起来初始背景图像与动画 gif 不太匹配。

希望有帮助。

于 2013-03-22T15:43:00.240 回答