zoukankan      html  css  js  c++  java
  • 自定义样式,使用浏览器阅读epub格式的电子书

    epub格式的电子式一般用专门的阅读器打开,但是如果可以使用浏览器打开,就可以随意更改css了,获得极致的体验效果。

    比如可以自定义字体、行间距、背景色、字体大小、缩进等等...

    当然,如果您不需要添加翻页按钮,请跳过第二、三步,直接进行第四步也可以。

    效果如下:

    一、使用解压软件将epub格式的电子书解压到特定的文件夹,解压后一般为html格式。

    二、将文件重命名,以数字方式命名,并从1开始编号,可以使用bat批处理文档,方面下一步翻页时计算页面。

    将如下代码拷贝到任一个记事本文件里面,将记事本后缀改为.bat,注意一定是真正的后缀是.bat,有的人改完之后是.bat.txt,这样是没有效果的

    @echo off

    set a=

    setlocal EnableDelayedExpansion

    for %%n in (*.html) do (

    set /A a+=1

    ren "%%n" "!a!.html"

    )

    双击执行批处理即可。

    三、在html页面中添加“上一页”,“下一页”按钮。

    将代码插入</body>之前,可以使用 notepad批量替换</body>字符。

    代码:

    <script language="javascript">
    <!--var strHref = window.location.href;
    var pageName = strHref.slice(strHref.lastIndexOf("/")+1);
    var pageNumber=parseInt(pageName.replace(".html",""));
    function forward()
    {var aa=pageNumber-1;window.location.href=aa+".html";}
    function back()
    {var bb=pageNumber+1;window.location.href=bb+".html";}
    //-->
    </script>
    <div>
    <div class="fanye1"><input type="button" value="上一页" onclick="forward()"></div>
    <div class="fanye2"><input type="button" value="下一页" onclick="back()"></div>
    </div>

    或者在外部引入js(推荐):

    将以下代码写入记事本,另存为fanye.js。

    <!--
    var strHref = window.location.href;
    var pageName = strHref.slice(strHref.lastIndexOf("/")+1);
    var pageNumber=parseInt(pageName.replace(".html",""));
    function forward()
    {
    var aa=pageNumber-1;
    window.location.href=aa+".html";
    }
    function back()
    {
    var bb=pageNumber+1;
    window.location.href=bb+".html";
    }
    //-->

    在html文件中引入,在</body>前加入如下代码

    <script src="fanye.js" type="text/javascript"></script>
    <div>
    <div class="fanye1"><input type="button" value="上一页" onclick="forward()"></div>
    <div class="fanye2"><input type="button" value="下一页" onclick="back()"></div>
    </div>

    四、在浏览器页面加入CSS样式,获得自定义的阅读效果。

    我的css是从https://ebooks.adelaide.edu.au/meta/titles/A.html这个在线书籍网站的页面复制下来的,稍作更改,直接放到解压后的书籍目录下,如下图的stylesheet.css。替换原来解压后的main.css 文件。

    我的stylesheet.css

    https://files.cnblogs.com/files/ricksteves/stylesheet.css

    (如需使用我的css,请右键以上链接目标另存为下载)

    使用浏览器阅读的好处是显而易见的,英文书籍直接配合欧路词典,划词取义。

    最后是效果图:

  • 相关阅读:
    对技术的态度
    码农提高工作效率
    为什么要使用String
    Java还是程序员的金饭碗
    为什么Java7开始在数字中使用下划线
    阿里云快速搭建一个静态网站
    IDEA中Springboot项目部署到阿里云linux服务器
    Linux环境下安装宝塔面板
    阿里云服务器的购买和配置以及搭建项目教程
    linux服务器上部署springboot项目,并让他持续运行到后台
  • 原文地址:https://www.cnblogs.com/ricksteves/p/9863576.html
Copyright © 2011-2022 走看看