Question

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

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

查看其网站here上的示例，并查看文档here。

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

Answer 1

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

@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>

这是一个JSFiddle！ http://jsfiddle.net/gU57Y/ - 按CTRL + P并测试打印视图来测试它。

如果您想了解有关根据媒体类型应用样式的详情，可以在media types page W3.org上了解有关该内容的更多信息。

使用jQuery freezeframe时创建可打印的图像

1 个答案: