使用jQuery冻结帧时创建可打印图像

Chris Antonellis的冻结帧插件允许您使用以下命令在鼠标悬停时设置gif动画：

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

请参见其网站上的示例以及文档

---

不幸的是，当使用此插件时，网站的打印版本无法显示图像（当网站上嵌入动画gif时，通常会在打印页面上弹出静态版本）。有没有办法修复它，使其正确打印？

您可以使用媒体类型为网站的打印版本设置特定样式

@media print {
    /* CSS styles here will only affect the website when it is printed. */
}

打印动画gif时，它将仅显示动画的第一帧。如果您想创建一个单独的动画gif“快照”图像，以便更好地控制打印版本上的内容，您可以在页面上嵌入另一个图像

根据您的具体需要，最好将每个图像包装在

div

中，并根据媒体类型应用特定的CSS。下面的代码将允许您在网站上为普通访问者显示动画gif，并允许您为打印版本指定要显示的单独图像

<style>
.print-image {
  display:none;
}

@media print {
    .screen-image {
        display:none;
     }
      .print-image {
        display:block;
      }
}
</style>

<!-- Content within the .screen-image element will be displayed to normal visitors -->
<div class="screen-image">
    <img src="http://placehold.it/450x250" />
    <p>Image for normal viewing.</p>
</div>

<!-- Content within the .print-image element will be displayed when website is printed -->
<div class="print-image">
    <img src="http://placehold.it/450x250" />
    <p>Image for print view.</p>
</div>

.打印图像{
显示：无；
}
@媒体印刷品{
.屏幕图像{
显示：无；
}
.打印图像{
显示：块；
}
}
用于正常查看的图像

用于打印视图的图像

这是一个JSFIDLE！-通过按CTRL+P并测试打印视图来测试它

---

如果您想了解更多关于基于媒体类型应用样式的信息，可以在at上了解更多信息。

谢谢您的帮助。我用普通图像测试过，效果很好。然而，使用FruteStFrand插件，打印版本确实隐藏了图像的可见性，但是图像的空白空间仍然出现。冻结框架的例子似乎打破了你的建议。我有一个简单的例子。@TSGM我已经修改了我的原始答案。这应该能奏效！