使用javascript和CSS分页一本书，并将所有内容放在一个页面上

Paging a book using javascript and CSS and with all content on one page

本文关键字：一个 分页 CSS javascript 一本 使用      更新时间：2023-09-26

好吧，我真的不知道这个问题的标题该怎么写。总之，我想做的是写一本书。在这里看看这本书的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)。通过在三角形。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" });
});
如果你还有任何问题，请告诉我。欢呼。
相关文章：