Question

我有一个带文字和图像的div，我想在页面的不同位置显示这个div的缩影。任何解决方案？

编辑：我想要div的较小副本，这应该适用于IE8，所以css3不是一个很好的解决方案。

Answer 1

您可以尝试使用html2canvas。此脚本允许您截取网页或部分网页的“屏幕截图”。

IE8要求您添加FlashCanvas或ExplorerCanvas。

可能不是像素完美的表示形式，但它可能会让你接近。

获得屏幕截图后，您应该能够将画布（HTML5画布，ExplorerCanvas或FlashCanvas）缩小到您需要的任何大小 - 注意：您可能会遇到缩放版本中的抗锯齿和工件问题......所以可能需要做一些额外的工作。

Answer 2

尝试这样的事情：

$('#myDiv').clone().appendTo('body').css({'position':'absolute','left':'50px;','top':'300px','transform':'scale(0.5)'})
});

注意：正如他们所说，您应该检查用户的浏览器并将供应商（moz，ms，o，webkit等）添加到css属性转换

在这里你可以玩它：http://jsfiddle.net/ZPMNz/11/（与firefox供应商）

但是如果你需要ie8的支持，可以在div中添加一个类并为它声明不同的样式：

 $('#myDiv').clone().appendTo('body').addClass('.thumb')});
    });

然后你有

#myDiv { width:500px;}
#myDiv h1{ font-size:20px;}
#myDiv h2{}
#myDiv p{}

#myDiv.thumb { width:200px;}
#myDiv.thumb h1{ font-size:10px;}
#myDiv.thumb h2{}
#myDiv.thumb p{}

这是更多的工作，但具有更多的兼容性

如何制作div的缩影

2 个答案: