javascriptとCSSを使用して1ページにすべてのコンテンツをページングする

Question

これで、この質問の見出しに何を書き込むのか本当に分かりませんでした。とにかく、私がしたいのは本を作ることです。 http://myst.sandman.net/

私はその本をIndesignで作成し、Flashファイルが使用するすべてのページからJPGファイルを書き出します。

しかし、これはFlashではなくHTMLで行います。私はページカール機能をそれほど必要としませんが、ブックレイアウトに制約されたいのです。

したがって、書籍のすべてのテキストとすべての画像が長いDIVに保存されているとします。私は、2つのページにそのコンテンツを流し、適合しないものを隠しながら、そのコンテンツの次の部分にページングできるようにする方法はありますか？すべては動的に計算されます。

私はfinnishedソリューションを探しているわけではありません。CSS/HTML/JavascriptとjQueryにはかなり便利なので、いくつかのアイデアや考え、正しい方向のいくつかの点を探しています。私はCSS3カラムを目に見えるコンテンツに使用することを考えていましたが、まだ標準ではないCSS3には問題ありませんが、CSS3カラムを必要としないソリューションがあれば、それは私にとっても大丈夫です。

どのようなコンテンツをディスプレイに表示するか、それをどのように計算するかを決める方法はわかりません。どんな助けもありがとうございます。

Answer 1

いくつかのオプションがあります。

まず、jBookBrowser
セカンド命名jqueryのウェブサイト上のプラグインがあり、私は前にjQueryを使って、簡単なコードの一部を書いてきました。 handheldcultureウェブサイトをご覧ください。 div＃newbookでは、プログラマーはすべての画像を1つのdiv.sliderに囲み、幅を3000％（w/css）の画面解像度にすることに決めました。三角形の上にclick関数を置くことによって.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" }); 
}); 

ご質問がありましたら、お知らせください。乾杯。