当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - How to make a preview of DIV in another DIV?

问题描述:

I am making an application or a site in html/css/javascript that will allow me to create slides, add some text, image maybe change color and styles to every slide and than launch it as a whole presentation.

So far I have managed to make a really easy layout :

http://sandbox.padsbanger.pl/ss/

My question is:

How can I make a dynamic preview of a div on sidebar and a full view of slide on the right ? This would allow me to switch between the diffrent slides and make changes to them.

Thanks in advance :)

EDIT: For this project I am not allowed to use PHP.

EDIT 2:

I am not bothering about storing the data about slides somewhere in db. The idea of this app it to make a presentation consistig of a few slides and then launch it full screen view as a presentation.

网友答案:

Well, you could do something like this:

.slajd * {
  zoom: 0.25;    
  -moz-transform: scale(0.25);    
  -moz-transform-origin: 0 0;    
  -o-transform: scale(0.25);    
  -o-transform-origin: 0 0;    
  -webkit-transform: scale(0.25);    
  -webkit-transform-origin: 0 0;
}

That would shrink all the content in the left 'preview' panes to 1/4 size. Then, when you click one just copy the innerHTML to the right pane and since it won't have the zoom/scale styles it will be full size.

As for the connecting - this will make all slides clickable. I suggest you add this to a document.ready block somewhere in the HEAD.

$('#leftcolumn').on('click', '.slajd', function() { 
    $('#rightcolumn').html($(this).html()); 
});
网友答案:

If you want to show the exact contents of the left sidebar in the main content area you can read the contents of the current sidebar using $this then use .html to read the content.

Take a look at Google Docs, slide/presentation as an example.

They basically size everything tiny in the left box which is just what's in the right.

网友答案:

First, you need to save all of the design parameters in a data structure, for example:

var design =
[
    {
        type : "background-image",
        params :
        {
            url: "/images/snow.png"
        }
    },
    {
        type : "image",
        params :
        {
            x : 100,
            y : 300,
            width : 100,
            height : 100,
            url: "/images/tree.png"
        }
    },
    {
        type : "text",
        params :
        {
            x : 100,
            y : 300,
            text : "Happy XMAS!",
            font :
            {
                size : 20
                family: arial;
            }
        }
    },
];

Here you have a background image, some text and a regular image. The size parameters will be used normally on the regular sized slide but you will have to divide those parameters by the size ratio of the large slide & the small one for example: if the large slide is 400x400 and the small one is 100x100 do this:

largeWidth  = 400;
largeHeight = 400;
smallWidth  = 100;
smallHeight = 100;
xRatio = Math.round( largeWidth / smallWidth );
yRatio = Math.round( largeHeight / smallHeight );

Now, when you draw the thumbnail slide you need to divide the coordinates of the large one (which are specified in the data structure by the x & y ratios).

分享给朋友:
您可能感兴趣的文章:
随机阅读: