jquery - 使用 jQuery freezeframe 创建可打印图像

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 并测试打印 View 来测试它。

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