如何在另一个DIV中预览DIV?

时间:2011-12-30 17:27:37

标签: javascript html css dynamic slide

我正在制作html / css / javascript中的应用程序或网站,这将允许我创建幻灯片,添加一些文本,图像可能会更改每张幻灯片的颜色和样式,而不是将其作为整个演示文稿启动。

到目前为止,我已经设法制作了一个非常简单的布局:

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

我的问题是:

如何在侧边栏上创建div的动态预览以及右侧的幻灯片的完整视图?这将允许我在不同的幻灯片之间切换并对它们进行更改。

提前致谢:)

编辑:对于这个项目,我不允许使用PHP。

编辑2:

我不想在db中存储有关幻灯片的数据。这个应用程序的想法是做一个演示文稿的几个幻灯片,然后作为演示文稿启动它全屏视图。

3 个答案:

答案 0 :(得分:5)

嗯,你可以这样做:

.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;
}

这会将左侧“预览”窗格中的所有内容缩小到1/4大小。然后,当您单击一个时,只需将innerHTML复制到右侧窗格,因为它没有缩放/缩放样式,所以它将是完整大小。

至于连接 - 这将使所有幻灯片都可以点击。我建议您将其添加到document.ready中某处的HEAD块。

$('#leftcolumn').on('click', '.slajd', function() { 
    $('#rightcolumn').html($(this).html()); 
});

答案 1 :(得分:0)

如果要在主要内容区域中显示左侧边栏的确切内容,可以使用$ this读取当前侧边栏的内容,然后使用.html读取内容。

以Google文档,幻灯片/演示文稿为例。

它们基本上对左侧框中的所有小部分进行了调整,这正好在右侧。

答案 2 :(得分:0)

首先,您需要将所有设计参数保存在数据结构中,例如:

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;
            }
        }
    },
];

这里有一张背景图片,一些文字和一张普通图片。 尺寸参数通常用于常规尺寸的幻灯片,但您必须将这些参数除以大滑块和尺寸的大小比例。小的例如: 如果大型幻灯片是400x400而小型幻灯片是100x100,请执行以下操作:

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

现在,当您绘制缩略图幻灯片时,您需要划分大缩略图的坐标(在数据结构中通过x& y比率指定)。