Div预览像缩略图 [英] Div preview like thumbnail

问题描述

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

I want users on my site to see live preview of a div. For example, there is one big div where user is free to make any changes. I want the user to see a small thumbnail of the same div on the same page.

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

I tried using jquery's clone method like this -

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

我正在尝试使用类 big 克隆div，并使用CSS使它看起来像缩略图.虽然可以，但它会重复使用具有相同ID的内部div，这会影响我的网站的功能.

I am trying to clone the div with class big and using CSS I am making it look like thumbnail. Although it works, but it duplicates the inner div's with same id's which is affecting the functionality of my site.

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

I want to know if there is any better way in Jquery/Javascript to create previews of div ?

推荐答案

我找到了解决方法

我们使用CSS变换对div进行变换.

We use transformation of div using css transform.

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

   });

这篇关于Div预览像缩略图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！