Question

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;
}

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

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

我已经联系了作者，但他解释说难的是代码当前占据了图像的第一帧 - 似乎还不清楚如何将CSS样式命令附加到它上面。

Answer 1

这很奇怪，但是让它看起来像样的黑客方法就是这样：

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

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

希望有所帮助。

如何设置此Javascript代码的背景图像的宽度？

1 个答案: