我正在制作html / css / javascript中的应用程序或网站,这将允许我创建幻灯片,添加一些文本,图像可能会更改每张幻灯片的颜色和样式,而不是将其作为整个演示文稿启动。
到目前为止,我已经设法制作了一个非常简单的布局:
http://sandbox.padsbanger.pl/ss/
我的问题是:
如何在侧边栏上创建div的动态预览以及右侧的幻灯片的完整视图?这将允许我在不同的幻灯片之间切换并对它们进行更改。
提前致谢:)
编辑:对于这个项目,我不允许使用PHP。
编辑2:
我不想在db中存储有关幻灯片的数据。这个应用程序的想法是做一个演示文稿的几个幻灯片,然后作为演示文稿启动它全屏视图。
答案 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比率指定)。