Question

我希望我网站上的用户能够看到div的实时预览。例如，有一个大的div，用户可以自由地进行任何更改。我希望用户在同一页面上看到同一div的小缩略图。

我尝试使用像这样的jquery克隆方法 -

$('.big').clone(true).addClass('small').appendTo("#show");

我正在尝试使用类 big 克隆div并使用CSS我使它看起来像缩略图。虽然它可以工作，但它复制了内部div，它们具有相同的id，影响了我网站的功能。

我想知道在Jquery / Javascript中是否有更好的方法来创建div的预览？

Answer 1

一种解决方案是将克隆的ID更改为例如“克隆”或任何适合。

$('.big').clone(true).attr('id', 'clone').addClass('small').appendTo("#show");

Answer 2

我找到了解决方案

我们使用css变换对div进行转换。

var fScaleAmount = 0.5;

   DivObj.css({
    "-moz-transform": "scale(" + fScaleAmount + ")",
    "-moz-transform-origin": "0% 0%",
    "-webkit-transform": "scale(" + fScaleAmount + ")",
    "-webkit-transform-origin": "0% 0%",
    "-ms-transform": "scale(" + fScaleAmount + ")",
    "-ms-transform-origin": "0% 0%",

   });

像缩略图一样预览

2 个答案: