查看完整版本: 不用修改page.js就能做到图文目录效果【转帖】

不用修改page.js就能做到图文目录效果【转帖】

[align=center][size=5][color=DarkOrchid]作者：zcq101[/color][/size][/align]
脚本来自WBZD [color=DarkOrchid]zcq101[/color]
自己用那部分脚本制作截个图来说明下效果
因为是做截图  只拿了两集出来排版制作
自己很佩服zcq101  很强悍  把他的两个帖子贴一起
[color=Red]***************************************************************************************************
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑华丽的分割线↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
***************************************************************************************************[/color]
这个是使用默认的输出效果  可以看到第一集简介部分在第一集上面
而第二集简介却在第一集和第二集之间
[attach]915389[/attach]

[color=Red]***************************************************************************************************
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑华丽的分割线↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
***************************************************************************************************[/color]

修改后的效果
[attach]915390[/attach]
[quote]
关于下面代码的说明
1.这段代码主要针对有实体书的小说，并不是通用于所有小说的！
2.请注意灵活使用！这点很重要！即使主要针对有实体书的小说，但也不能保证做到100％的通用，因为每本小说的实际情况会不同，所以在应用在具体的小说，要做必要的修改！需要强调的是这段代码是根据数组pages的结构来编写的，修改时一定要参照数组pages的结构，不要盲目修改！
3.关于快速定位，如果出现定位不准确，请根据实际情况修改判断条件！其实，这点应该归类于上一点！
4.我没有添加生成分卷阅读链接的代码，需要的请自己添加！
5.我只测试过几种情况，并不能保证所有情形都适用
[/quote][code]<script language="javascript" type="text/javascript">
var i = 0;j=1;
var end = pages.length
document.write("<tr><td align=center colspan=4 height=30><b>第：</b>");
while(i != end)
{
if(pages[i][3] != undefined)
{
  if(pages[i][3].substr(0,4) == "<img"||pages[i-1][3] == undefined)
  {
  document.write("<a href=#zb"+i+" title='第"+j+" 集' style='text-decoration:none;font-size:9pt;padding:5px'>"+j+"</a>");
  j++;
  }
}
i++;
}
document.write("<b>集</b></td></tr>");
i=0;
while(i != end)
{
document.write("<tr>")
for(nn = 1;nn < 5;nn++)
{
  if (i == end)
  {
   if(nn == 1) break;
   else document.write("<td class='tablebody1' align='middle' style='width:25%;height:30'> </td>");
  }
  else
  {
   if (pages[i][3] != undefined)
   {
    if(nn == 1)
    {
     if(pages[i][3].substr(0,4) == "<img")
     {
      document.write("<td class='tablebody2' colspan='4' align='center' valign='middle' style='height:30'><a name=zb"+i+"></a>"+pages[i+1][3]+"</td>");
      document.write("</tr><tr>");
      document.write("<td colspan=1 align=center>"+pages[i][3]+"</td><td class='tablebody1' colspan=3>"+pages[i][1]+"</td>");
      document.write("</tr><tr>");
      document.write("<td class='tablebody1' valign='middle' style='width:25%;height:30'>");
      document.write("<a href=javascript:loadurl('chapter.htm',"+(i+1)+") class=b1 title='本章字数："+pages[i+1][2]+"'>"+pages[i+1][1]+"</a>");
      document.write("</td>");
      i=i+2;
     }
     else
     {
      document.write("<td class='tablebody2' colspan='4' align='center' valign='middle' style='height:30'><a name=zb"+i+"></a>"+pages[i][3]+"</td>");
      document.write("</tr><tr>");
      document.write("<td class='tablebody1' valign='middle' style='width:25%;height:30'>");
      document.write("<a href=javascript:loadurl('chapter.htm',"+i+") class=b1 title='本章字数："+pages[i][2]+"'>"+pages[i][1]+"</a>");
      document.write("</td>");
      i++;
     }
    }
    else document.write("<td class='tablebody1' align='middle' style='width:25%;height:30'> </td>");
   }
   else
   {
    document.write("<td class='tablebody1' valign='middle' style='width:25%;height:30'>");
    document.write("<a href=javascript:loadurl('chapter.htm',"+i+") class=b1 title='本章字数："+pages[i][2]+"'>"+pages[i][1]+"</a>");
    document.write("</td>");
    i++;
   }
  }//if pages
}//for nn
document.write("</tr>");
}//while
function gotoNextPage()
{
     if (window.event.keyCode == 39 && parent.txt != undefined) loadurl("chapter.htm",parent.txt);
}
document.onkeydown = gotoNextPage;
</script> [/code][color=Red]***************************************************************************************************
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑华丽的分割线↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
***************************************************************************************************[/color]第二种修改效果
[attach]915391[/attach]
[quote]
代码是今中午写的，内容是关于一种目录排版方式，不用修改HP生成的page.js文件中内容，做出来的效果如上图。
说明一下
1.代码是今中午写的，所以没有测试过几本书。不能保证100%通用
2.图片的那些阴影，一致的宽和高，虚线效果，超链接样式等等。这些都是在CSS中定义的！自己去看吧
3.js代码中有空格的html代码，但是在论坛中显示不出来。
4.如果快速定位不准，请自己修改判断条件
5.做出来的效果如果感觉排列的太稀疏或者紧密，自己修改变量h的值。
[/quote][code]<script language="JavaScript" type="text/javascript" >
var i = 0;
var h=320;
var m=1;
var end = pages.length;
document.write("<tr><td colspan=2 height=30><table width=100% border=0 cellpadding=0 cellspacing=5 align=center><tr ><td style='line-height:150%;'><b>第：</b>");
while(i!=end)
{
if(pages[i][3]!=undefined&&pages[i][3].substr(0,4) == "<img")
{
document.write("<a href=#zb"+i+" class=b1>"+m+"</a>　");
m++
}
i++
}
document.write("<b>集</b></td></tr></table></td></tr>");
i=0;
while(i != end)
{
  
for(nn = 1;nn < 2;nn++)
{
  if (i == end)
  {
    break;   
  }
  else
  {
   if (pages[i][3] != undefined)
   {
    if(pages[i][3].substr(0,4) == "<img")
    {
    if(i!=0){document.write("</table></td></tr>")}
    document.write("<tr>")
    document.write("<td align=center width=25% height=30 class='tablebody2'>本集封面</td><td align=center width=75% height=30 class='tablebody2' ><a name='zb"+i+"'></a>"+pages[i+1][3]+"</td>");
    document.write("<tr><td align=center width=25% >"+pages[i][3]+"</td>");
    document.write("<td  width=75% ><table border=0 width=100% height="+h+" align=center cellspacing=0 cellpadding=5><tr><td width=30%><a href=javascript:loadurl('chapter.htm',"+i+") title='本章字数："+pages[i][2]+"' class=b1>内容简介</a></td><td width=50%><hr></td><td width=10%><b>第</b> "+(i+1)+" <b>页</b></td></tr>");
    document.write("<tr><td width=30%><a href=javascript:loadurl('chapter.htm',"+(i+1)+") title='本章字数："+pages[i+1][2]+"' class=b1>"+pages[i+1][1]+"</a></td><td width=60%><hr></td><td width=10%><b>第</b> "+(i+2)+" <b>页</b></td></tr>");
    i=i+2;
    }
    else
    {
    if(i!=0){document.write("</table></td></tr>")}
    document.write("<tr>")
    document.write("<td align=center width=25% height=30 class='tablebody2'>"+pages[i][3]+"</td>");
    document.write("<td  width=75% ><table border=0 width=100% align=center cellspacing=0 cellpadding=5><tr><td width=30%><a href=javascript:loadurl('chapter.htm',"+i+") title='本章字数："+pages[i][2]+"' class=b1>"+pages[i][1]+"</a></td>");
    document.write("<td width=60%><hr></td><td width=10%><b>第</b> "+(i+1)+" <b>页</b></td></tr>")
    i++;   
    }
   }
   else
   {
    document.write("<tr><td width=30%><a href=javascript:loadurl('chapter.htm',"+i+") title='本章字数："+pages[i][2]+"' class=b1>"+pages[i][1]+"</a></td><td width=60%><hr></td><td width=10%><b>第</b> "+(i+1)+" <b>页</b></td></tr>");
    i++;   
   }
  }//if pages
}//for nn
}//while
document.write("</table></td></tr>")
function gotoNextPage()
{
     if (window.event.keyCode == 39 && parent.txt != undefined) loadurl("chapter.htm",parent.txt);
}
document.onkeydown = gotoNextPage;
</script> [/code]下面的CSS代码是让水平线呈虚线显示[code]hr{border-bottom-style: dotted; border-left-style: dotted; border-right-style: dotted; border-top-style: dotted; size:1px; color:black; text-shadow:none} [/code][color=Red]***************************************************************************************************
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑华丽的分割线↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
***************************************************************************************************[/color]
应要求上传附件  不是chm格式
为输出后的文件夹  方便查看代码
以上代码放在index*\jscss\index.js
第二个效果自己修改下单元格大小
附件是修改过的

[[i] 本帖最后由 qqzhal 于 2009-6-9 09:13 编辑 [/i]]

学习中，不知道那年那月才有这种效果……
膜拜中……

一直在学习，就是没有好的老师。今天又学到了东西。

这种效果感觉不如航星的封面版式模板，所以用过几次放弃了。

楼主真是高人啊，我自以为这目录脚本就航星能写，没有想到今天这里也有高人现身，拜读了楼主的大作，厉害啊，看来这个色中色真是藏龙卧虎之地，了不起，不过，楼主我感到的是有点美中不足啊，怎么光有截图，没有列子啊，这样让我等学习起来难度有点大，希望楼主如果想送拂就送的上青天，做个列子发上来让我们也感受一下雨露的滋润，如实在不便就发个目录脚本也算，最后，楼主对你的帖子是是了不起。佩服了。

[quote]原帖由 [i]vap007[/i] 于 2009-6-7 19:47 发表 [url=http://67.220.91.20/forum/redirect.php?goto=findpost&pid=33025586&ptid=2135534][img]http://67.220.91.20/forum/images/common/back.gif[/img][/url]
楼主真是高人啊，我自以为这目录脚本就航星能写，没有想到今天这里也有高人现身，拜读了楼主的大作，厉害啊，看来这个色中色真是藏龙卧虎之地，了不起，不过，楼主我感到的是有点美中不足啊，怎么光有截图，没有列子 ... [/quote]
已经上传附件  还有这个代码是转来的。。。

[[i] 本帖最后由 qqzhal 于 2009-6-9 09:14 编辑 [/i]]

楼主

之前见过类似的这类电子书，看着还是很不错的，但是有点小小的区别，不知道有无办法实现？


[attach]919129[/attach]

[[i] 本帖最后由 dycrystal 于 2009-6-9 15:30 编辑 [/i]]

在排版后的TXT文本里加入
·卷章分行范例：
<img src=../txt/图片.jpg>
（两个空行）
<font size=2>[内容简介]<Br><Br>　　简介第一行<Br>　　简介第二行<Br>……<Br>　　简介最后一行</font>
（两个以上空行）
正文内容

·卷章一行范例：
<img src=../txt/图片.jpg> <font size=2>[内容简介]<Br><Br>　　简介第一行<Br>　　简介第二行<Br>……<Br>　　简介最后一行</font>
（两个以上空行）
正文内容

然后在用HP输出就是图文目录了啊   <img src=../txt/图片.jpg>   是加图片的代码  txt是存图片的文件夹 用HP输出后就能看到  图片.jpg

是图片名称 可以自己修改 要与你放入txt文件夹里的图片一致就可以了啊  

由于不会传图片 不能给大家看效果 我在救助投诉区发了个帖子 [url]http://67.220.92.13/bbs/viewthread.php?tid=2264603&pid=35353120&page=1&extra=page%3D1#pid35353120[/url]  里有本我做的 比较粗糙 就是用这个方法做的 不过不知道怎么搞的 不小心弄成EBK格式了

对于新手来说这个代码就可以做出图文目录了 当然要是高手懂得代码的还是楼主的好 我是新手我知道  对于楼主发的代码我连最起码的改哪个文件或者把楼主发的代码复制到什么地方都不知道。。。。

代码对我们这些门外汉来说真是太难了。只能见一个收一个，以备不时之需了。

css我目前还是学不好，边摸索边学习了。看你这篇文章，有茅塞顿开之感，太精辟了。谢谢楼主。

这个好，非常专业，如果能制成一个小软件就好了

楼主，有这么复杂吗。有点故弄玄虚了吧，其实就是多加两组代码的事情，就完全可以解决了。为什么非要搞的这么复杂，是否这样就显得水平高一样，其实，你爱怎么写就怎么写，但是。有一个问题你想过没有，你这个可是这是一个教程啊，有很多人学习，这样怕是越教越难了吧。

这个代码真的很好用，以后作书的时候要用到， 先谢谢了！~

代码是有了，具体操作还是不清楚啊  css盲，只会用hp

很不错的代码，帮我做图书省了很多力。:excellence

最近才开始学习制作电子书，楼主的发帖很给力啊，不过对于我这种初学者有点难了

学习代码制作目录式的电子书，比较代码进行学习。

很厉害啊，做电子书时候最讨厌的就是改代码了呢，但是，说实话，没怎么看懂教程

太厉害了，就是不知道这种格式的文件怎样在安卓手机上面打开啊？