<分区>
标签 javascript html css paging
<分区>
好吧，所以我真的不知道该为这个问题的标题写什么。不管怎样，我想做的是写一本书。在此处查看本书的 Flash 版本:http://myst.sandman.net/
我使用 Indesign 制作那本书，然后从所有页面导出 JPG 文件，Flash 文件使用这些文件。
但我想在 HTML 而不是 Flash 中执行此操作。我不太需要卷页功能，但我确实希望将其限制在书籍布局中。
因此，想象一下这本书的所有文本和所有图像都保存在一个长 DIV 中。有没有什么方法可以让我在两个页面上流动该内容，同时隐藏不适合的内容，但能够分页到该内容的下一部分 - 所有这些都是动态计算的。
我不是在寻找完成的解决方案，我对 CSS/HTML/Javascript 和 jQuery 相当得心应手，所以我更愿意寻找一些想法和想法，以及一些正确方向的要点。我一直在考虑将 CSS3 列用于可见的内容，我对 CSS3 尚未成为标准没有任何问题，但如果有不需要 CSS3 列的解决方案，那对我来说也是可以的。
我不确定的是如何确定适合显示的内容以及如何计算它。感谢您的帮助。
最佳答案
有几个选项。
首先jquery网站上有个插件叫jBookBrowser
第二，之前用jquery写过一段简单的代码。查看handheldculture网站。在 div#newbook 中，程序员决定将所有图像封装到一个 div.slider 中，并将宽度设置为屏幕分辨率的 3000%(w/css)。通过将点击功能放在三 Angular 形 .previous 和 .next div#newbook 上，移动到下一张图片。我想您可以将其用作翻页动画，而且实现起来并不难。这是 jquery 代码:
var elNewbook = $("#newbook").find(".book-info .slider").data("index", 0);
$("#newbook").find(".previous a").bind("click", function () {
if (elNewbook.data("index") > 0)
elNewbook.data("index", elNewbook.data("index") - 1).animate({ left: "+=185px" });
else elNewbook.data("index", 18).animate({ left: "-=3330px" });
});
$("#newbook").find(".next a").bind("click", function () {
if (elNewbook.data("index") < 18)
elNewbook.data("index", elNewbook.data("index") + 1).animate({ left: "-=185px" });
else elNewbook.data("index", 0).animate({ left: "+=3330px" });
});
如果您还有任何问题，请告诉我。干杯。
关于javascript - 使用 javascript 和 CSS 将一本书分页并将所有内容放在一页上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7023576/