简介

一个阅读英文版哈利波特的小网站reader，源码放到GitHub上了，感兴趣的可以看看。打开书籍后双击单词能够显示释义(如果有的话)，如下图。推荐使用chromium-edge阅读，翻页动画更舒服。

动机

大概是一两年前吧，因为想看看哈利波特英文原版，就在网上找了epub格式的电子书来看。当时用win10的edge浏览器看epub还是非常舒服的，不过因为自带的翻译是英英互译的，所以就想要是能变成中文的就好了。搜罗了一些方法之后发现无果，就放弃了。后来2019下半年的时候，edge不支持看epub电子书了，很无奈，不过也更加坚定了做一个英文阅读网站的目标了。然后就有了reader这个项目。

功能实现

翻译

核心功能就是选中单词后显示单词翻译。因为有道、谷歌等的翻译API不是免费的，所以在GitHub上找了个词库，把词库导入导入到了数据库中用，但翻译的效果差强人意，还算凑合。另外，最初是打算做成鼠标悬浮显示翻译，搜索了一番发现只能通过将每个单词用标签包裹，设置标签的mousehover事件实现，但是这样的话，如果内容很多就会就会卡顿，体验极差。当然进一步的考虑就是每次只加载一页内容，按需加载，使用动画实现翻页等，摸索了一番，发现只会使网页更加复杂，难于实现。于是就改为了选中单词显示翻译，这样的话只需要考虑mouseup, selectionchange,selectstart等事件，算是一种折中。

翻页动画

最初的想法其实是一个win客户端，并且核心功能还包括一个更好的翻页动画实现，参考edge的滚动动画。但是进一步考虑后发现完全可以做成一个网站，然后使用edge(chromium版)浏览这个网站，那就不用自己再考虑翻页动画的实现。当然后来发现完全可以使用CSS动画手动实现"翻页"，通过三次贝塞尔曲线animation-timing-function: cubic-bezier(0.12, 1, 0.1, 1)，在需要翻页的时候，使用动画，将下一页内容移入屏幕，将当前内容移除屏幕即可。另外，也可以使用requestAnimationFrame使用类似的功能，可以参考我的另一篇文章requestAnimationFrame的使用。

其它

其它大大小小的功能，虽然实现就几行代码，但是也是挺麻烦的

横向翻页实现

首先是要让文本内容能够横向滚动，这个可以通过设置div的column属性以及overflow-y: hidden实现，可以参考HTML横向滚动实现。文字排版的话，使用column后容器会自动排列内容，效果也不错。起初是手动添加段落p然后判断外层容器高度是否过大实现，但是这样问题很多，所以后来就放弃了。很好奇HTML是否提供了将一个div中的内容溢出到另一个div中这种功能。
复制

这个就很扯了，js没有直接的接口，当然你可以用其它的js库实现，但是一种最简单直白的方法就是:

设置一个看不见的input – 手动将待复制的内容设置为input的内容 – 使用input.select()函数选中 – 执行document.execCommand("copy", false)
break-before

似乎只有h标签的break-before: column会生效
手动触发动画

JavaScript没有提供触发动画的接口，需要手动设置以及清除动画属性。

触发动画: 设置元素的动画属性(div.style.animation)，并且在动画结束后清除动画(style.animation = "none")
CSS中的calc函数

在设置left, top等属性时，可以使用calc函数计算偏移量，比如left: calc(50% - 30px)
父元素 position: relative, 子元素 position: absolute

子元素按照父元素定位。如果不定义父元素的relative定位，子元素会根据整个网页定位

总结

绕了很多弯路，不过做出来后还是挺开心的，而且其它的书籍也能够处理一下放上来阅读。网站使用uWsgi简单部署了一下，没什么可说的。代码可以看GitHub，如果文章内容不对，还望评论指出。

HarryPotter阅读网站编写记录相关推荐

分级阅读网站/阅读网站.阅读系统的设计与实现
分级阅读网站摘要本论文主要论述了如何使用java语言开发一个分级阅读网站 ,系统将严格按照软件开发流程进行各个阶段的工作,采用B/S架构,面向对象编程思想进行项目开发.在引言中,作者将论述阅读分享 ...
基于java+SpringBoot+HTML+Mysq+微信小程序+小说阅读网站
详细功能设计:请点击下面链接查看基于java+SpringBoot+HTML+Mysq+微信小程序+小说阅读网站_哔哩哔哩_bilibili 源码+论文获取: 源码+论文获取请私信获取基于Spr ...
一个基于 SpringBoot 开源的小说和漫画在线阅读网站，简洁大方！强烈推荐！
来源:GitHub精选今天给大家推荐的这个开源项目是一个基于 SpringBoot 实现的小说和漫画在线阅读网站. 这个开源项目叫:fiction_house. 这个开源项目是一个多平台(web.安 ...
一个基于 SpringBoot 开源的小说和漫画在线阅读网站，简洁大方、强烈推荐
来源:GitHub精选今天给大家推荐的这个开源项目是一个基于 SpringBoot 实现的小说和漫画在线阅读网站. 这个开源项目叫:fiction_house. 这个开源项目是一个多平台(web.安 ...
本地小说阅读网站打造
目录一.本地小说网站总体组织框架 1.所需的VUE库和elementLib以及JQ库 2.本地目录设计 3.整体代码样式二.正文核心代码 1.引入element 样式,和自定义的样式 2.引入JS ...
如何在阿里云上搭建个人网站(学习记录)
如何在阿里云上搭建个人网站(学习记录) 第一次写博客记录学习的过程,不仅可以巩固学习知识,也方便日后复习.并且可以记录自己的成长. 先购买阿里ECS云服务器购买网站https://promotion ...
从零教你实现一个小说和漫画在线阅读网站[附源码]
今天给大家推荐的这个开源项目是一个基于 SpringBoot 实现的小说和漫画在线阅读网站. 这个开源项目叫:fiction_house. 这个开源项目是一个多平台(web.安卓 app.微信小程序) ...
基于Springboot的在线网络小说阅读网站的设计与实现
摘要现在是互联网快速发展的时代,网络是一种新媒体的类型,被称为"第四媒体",随着越来越多的人进入互联网时代,网络阅读一种由文本的变化所带来的新的阅读方式,借助计算机.网络技术 ...
计算机毕业设计Java小说阅读网站（源码+系统+mysql数据库+Lw文档）
计算机毕业设计Java小说阅读网站(源码+系统+mysql数据库+Lw文档) 计算机毕业设计Java小说阅读网站(源码+系统+mysql数据库+Lw文档) 本源码技术栈: 项目架构:B/S架构开发语 ...

HarryPotter阅读网站编写记录

文章目录

简介

动机

功能实现

翻译

翻页动画

其它

总结

HarryPotter阅读网站编写记录相关推荐

最新文章

热门文章