Div preview like thumbnail

Question

我希望我的網站上的用戶可以看到div的實時預覽。例如，有一個大的div可供用戶自由地進行任何更改。我希望用戶在同一頁面上看到同一個div的小縮略圖。

我試圖使用jQuery的克隆方法是這樣 -

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

我試圖克隆與類大 div和使用CSS我使它看起來像縮略圖。雖然它可以工作，但它會重複使用影響我網站功能的相同ID的內部div。

我想知道是否有更好的方式在jquery/Javascript創建div的預覽？

Answer 1

我找到了解決方案

我們使用使用CSS變換格的改造。

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%", 

    }); 

Answer 2

一種解決方法是將克隆的ID改變爲例如「克隆」或任何適合。

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