作者：zcq101
在WBZD的航行，大海，红狮等专区下过E书的朋友都只道，他们的书很有特色。目录结构不同于一般的E书。这种方式原理是通过修改HP软件输出的数组pages的结构，在配合编写相应的脚本来实现的。
我以《天誓》为例说说这种样式书的制作，例程种所用到的部分代码取自或修改于航星。墨水、狂鹰等诸多高手，电子书文本、封面图片取自暗夜刺血，在这向他们表示感谢！
首先看看效果
封面
每一卷的目录
正式进入制作
1、准备工作和数组的修改
按照正常的排版，切割文本，但不要打包。下面进行准备工作的最重要的一步：修改数组结构
这是修改前的数组结构，即HP软件输出的样式（由于数组下标有点长，只贴出部分内容，其它结构与贴出代码是一样的）
复制内容到剪贴板
代码:
var pages = new Array();
pages[0]=['1_01','本集简介','0','第一集 大风歌'];
pages[1]=['1_02','第一章 乱世','7764'];
pages[2]=['1_03','第二章 帝女花','6532'];
pages[3]=['1_04','第三章 定襄城','6537'];
pages[4]=['1_05','第四章 大风歌','6341'];
pages[5]=['1_06','第五章 去长安','7669'];
pages[6]=['1_07','第六章 梦入京华','7728'];
pages[7]=['1_08','第七章 长安之夜','7595'];
pages[8]=['1_09','第八章 如此受邀','6581'];
pages[9]=['1_10','第九章 夜宴','6986'];
pages[10]=['2_01','本集简介','0','第二集 九鼎传说'];
pages[11]=['2_02','第一章 阶下囚','6832'];
pages[12]=['2_03','第二章 生死状','7266'];
pages[13]=['2_04','第三章 霸王会','7265'];
pages[14]=['2_05','第四章 百鬼迎宾','7168'];
pages[15]=['2_06','第五章 楚巫','7186'];
pages[16]=['2_07','第六章 淮南旧事','7181'];
pages[17]=['2_08','第七章 大楚宝藏','7368'];
pages[18]=['2_09','第八章 火熠神鼎','5551'];
pages[19]=['2_10','第九章 釜底抽薪','6844'];
pages[20]=['3_01','本集简介','0','第三集 菊中秘'];
pages[21]=['3_02','第一章 失算','7180'];
pages[22]=['3_03','第二章 死敌','6729'];
pages[23]=['3_04','第三章 死亡车队','7109'];
pages[24]=['3_05','第四章 怀玉其罪','6371'];
pages[25]=['3_06','第五章 高凡的身世','7103'];
pages[26]=['3_07','第六章 五年前的往事谜团','6123'];
pages[27]=['3_08','第七章 高廉风之死','9757'];
pages[28]=['3_09','第八章 回京','6541'];
pages[29]=['3_10','第九章 巫蛊','5996']; 下面是修改后结构
复制内容到剪贴板
代码:
var pages = new Array();
pages[0]=['1_01','本集简介','0','第一集 大风歌',''];
pages[1]=['1_02','第一章 乱世','7764'];
pages[2]=['1_03','第二章 帝女花','6532'];
pages[3]=['1_04','第三章 定襄城','6537'];
pages[4]=['1_05','第四章 大风歌','6341'];
pages[5]=['1_06','第五章 去长安','7669'];
pages[6]=['1_07','第六章 梦入京华','7728'];
pages[7]=['1_08','第七章 长安之夜','7595'];
pages[8]=['1_09','第八章 如此受邀','6581'];
pages[9]=['1_10','第九章 夜宴','6986'];
pages[10]=['2_01','本集简介','0','第二集 九鼎传说',''];
pages[11]=['2_02','第一章 阶下囚','6832'];
pages[12]=['2_03','第二章 生死状','7266'];
pages[13]=['2_04','第三章 霸王会','7265'];
pages[14]=['2_05','第四章 百鬼迎宾','7168'];
pages[15]=['2_06','第五章 楚巫','7186'];
pages[16]=['2_07','第六章 淮南旧事','7181'];
pages[17]=['2_08','第七章 大楚宝藏','7368'];
pages[18]=['2_09','第八章 火熠神鼎','5551'];
pages[19]=['2_10','第九章 釜底抽薪','6844'];
pages[20]=['3_01','本集简介','0','第三集 菊中秘',''];
pages[21]=['3_02','第一章 失算','7180'];
pages[22]=['3_03','第二章 死敌','6729'];
pages[23]=['3_04','第三章 死亡车队','7109'];
pages[24]=['3_05','第四章 怀玉其罪','6371'];
pages[25]=['3_06','第五章 高凡的身世','7103'];
pages[26]=['3_07','第六章 五年前的往事谜团','6123'];
pages[27]=['3_08','第七章 高廉风之死','9757'];
pages[28]=['3_09','第八章 回京','6541'];
pages[29]=['3_10','第九章 巫蛊','5996']; 通过对比，我们可以发现只是在原来记录中卷名的4维数组中，有添加了一个新数据用来记录封面图片的地址
例如：原来的
pages[0]=['1_01','本集简介','0','第一集 大风歌'];
修改后的
pages[0]=['1_01','本集简介','0','第一集 大风歌','<img src=../txt/1.jpg class=cover1>'];
说明：修改后的记录中最后一维数组中有个 class=cover1 。这个是对该图片应用一个名叫cover1的CSS类
其代码是
复制内容到剪贴板
代码:
.cover1{ width:180px; height:250px;border:5px solid #FFFFFF; filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=135,strength=5); }给图片添加这个CSS类的目的是统一控制图片的宽度，高度，添加滤镜效果。这样封面显示中，所有的图片都一样的大小和阴影效果，比较好看。
好了，到此准备工作完毕。下面进入封面制作
3、分卷目录页的制作
这部分包含两个内容
一、分卷目录的显示；二、各卷之间的互相切换。
3.1、分卷目录的显示
思路：不知大家注意过HP电子书分卷阅读的样式没。上面是该卷的章节目录，下面是具体内容。如果我们去掉章节内容，那正好是该卷目录。因此可以利用这一点，对volume.htm进行修改。
目录显示的代码在volume_index.js文件中，这是里面的代码
注：代码是根据航星的改写的，感谢航星O(∩_∩)O
复制内容到剪贴板
代码:
if (parent.txt == undefined)
{
parent.txt = Number(ReadCookies("index"));
}
if(pages[parent.txt][4]==undefined)
{
for(var a=parent.txt ; a>-1; a--)
{
if(pages[a][4]!=undefined) { break; }
}
parent.txt=a;
}
//alert(parent.txt)
function volumeIndex(){
var i=parent.txt;
var end=pages.length;
document.write("<tr ><td><table width=100% align=center><tr><td><font style='font-size:16px;'>"+pages[i][3]+"</font></td></tr>");
document.write("<tr align=center><td><table width=90% border=0><tr><td><div class='dccss'><a href=javascript:loadurl('chapter.htm',"+i+") title='本章字数："+pages[i][2]+"'>"+pages[i][1]+"</a> ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div></td><td width=10><div class='dccss'>"+(i+1)+"<div></td></tr></table></td></tr>");
i++;
while(i!=end)
{
document.write("<tr align=center>");
if(pages[i][4]!=undefined)
{
break;
}
else
{
document.write("<td class='volumeccss'><table width=90% border=0><tr><td><div class='dccss'><a href=javascript:loadurl('chapter.htm',"+i+") title='本章字数："+pages[i][2]+"'>"+pages[i][1]+"</a> ----------------------------------------------------------------------------------------------------------------------------------------------------</div></td><td width=10><div class='dccss'>"+(i+1)+"<div></td></tr></table></td>");
}
document.write("</tr>");
i++;
}
document.write("</table></td></tr>");
}
function daohang(){
var z=0,y=1;
var end=pages.length;
document.write("<table align=center width=90% border=0 cellspacing=0 cellpadding=0><tr><td>");
document.write("<div class='dccss' align=center><b>第 </b>");
while(z!=end)
{
if(pages[z][3]!=undefined)
{
document.write("<a href=javascript:loadurl('volume.htm',"+z+") title='"+pages[z][3]+"'>"+y+"</a> ");
y++;
z++;
}
else
{
z++;
}
}
document.write("<b>集</b></div></td></tr>");
document.write("</table>");
}
function volume_image(){
document.write(pages[parent.txt][4])
}
setCookies("index",String(parent.txt)); 简单说明：带页码目录的显示脚本是volumeIndex()函数，图片输出是volume_image()函数，输出各卷之间的互换是daohang()函数，
在volume.htm中用下列方式调用
volume.htm的代码
复制内容到剪贴板
代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" >
<title>龙卡</title>
<meta HTTP-EQUIV="Page-Enter" CONTENT="revealtrans(duration=1.0, transition=23)">
<meta HTTP-EQUIV="Page-Exit" CONTENT="revealtrans(duration=1.0, transition=23)">
<link rel="stylesheet" href="js/style.css" type="text/css">
<script language=javascript src='../js/page.js'></script>
<script language="javascript" src="js/volume.js"></script>
<script language="javascript" src="js/volume_index.js"></script>
</head><body>
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="119" height="67" background="images/001.png"> </td>
<td align="center" background="images/002.png"><font class="f3">快捷键：[←]上一集，下一集[→]，[Enter]目录</font></td>
<td width="119" background="images/003.png"> </td>
</tr>
</table>
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="65" height="33" align="right" valign="middle" background="images/031.png"><img src="images/xing1.gif" width="15" height="17" ></td>
<td valign="middle" background="images/032.png"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" height="33" class="f2">龙卡</td>
<td width="50%" height="33" align="right" class="f2">作者：骷髅精灵&铁男</td>
</tr>
</table></td>
<td width="65" align="left" valign="middle" background="images/033.png"><img src="images/xing1.gif" width="15" height="17" ></td>
</tr>
</table>
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="43" height="30" background="images/011.png"> </td>
<td background="images/012.png"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="85%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><hr color=#506080 size="1"><script language=javascript>daohang();</script><hr color=#506080 size="1">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%">
<tr><td width="30%" align="center" valign="middle"><script language="javascript">volume_image()</script></td>
<td width="70%"><table border=0 frame=box rules=all width=98% align=center cellspacing=0 cellpadding=0>
<script language="javascript">volumeIndex()</script>
</table>
</td></tr></table>
<table width="80%" border="0" bordercolor="#c88633" cellspacing=0 cellpadding=0>
<tr>
<td align=center><script language="javascript">next("上一集","封面","下一集",2);</script></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><hr class="hr1" size="1">
</td>
</tr>
</table></td>
<td width="43" background="images/013.PNG"> </td>
</tr>
</table>
<table width="80%" height="33" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="65" align="right" valign="middle" background="images/041.png"><img src="images/xing1.gif" width="15" height="17" ></td>
<td background="images/042.png"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" height="33" class="f2">ZCQ101E书</td>
<td width="50%" height="33" align="right" class="f2">我不知道论坛</td>
</tr>
</table></td>
<td width="65" align="left" valign="middle" background="images/043.png"><img src="images/xing1.gif" width="15" height="17" ></td>
</tr>
</table>
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="119" height="67" background="images/021.png"> </td>
<td align="center" background="images/022.png"><font class="f3">资料收集于网上，版权属于原作者，请勿用于商业传播。</font></td>
<td width="119" background="images/023.png"> </td>
</tr>
</table>
<a name=bottom></a>
<div id="float" style="position:absolute;right:27;height:180pt;top:expression(document.body.clientHeight-this.style.pixelHeight+document.body.scrollTop)">
<table border=1 cellspacing=2 cellpadding=0 bordercolorlight=#528888 bordercolordark=#bdc9db bgcolor=#E0E8E8>
<tr align=center>
<td><a href=#top><img src=images/top.gif border=0 alt=页首></a></td></tr></tr>
<tr><td><a href=javascript:loadurl("volume.htm",prevol)><img src=images/back.gif alt=上页 width="16" height="16" border=0></a><a href=index.htm><img src=images/return.gif alt=目录 width="16" height="16" border=0></a><a href=javascript:loadurl("volume.htm",nextvol)><img src=images/next.gif alt=下页 width="16" height="16" border=0></a></td></tr>
<tr align=center><td><a href=#bottom><img src=images/bottom.gif border=0 alt=页尾></a></td></tr>
</table>
</div>
</body>
</html> 在这段代码中通过下面代码加载外部的JS文件，当然也可以直接写在HTML文件中，但是那样显得不够简洁
<script language=javascript src='../js/page.js'></script>
<script language="javascript" src="js/volume_index.js"></script>
这样就加载了page.js和volume_index.js两个文件
再通过下面得代码执行相关的函数（添加到你想要产生效果的地方，如某个单元格）
<script language="javascript">volume_image()</script>
<script language="javascript">volumeIndex()</script>
<script language="javascript">danghang()</script>
效果如下
[
本帖最后由 swimmingcake 于 2009-6-7 18:24 编辑 ]
推荐榜
短消息
繁体中文
找回方式
手机版
广告招商
主页
手机版
界面风格
帮助
我的
搜索
申请VIP
在线客服(1)
