web实现小说阅读器的水平滑动翻页

2024-05-17 14:02:35

大致效果：https://codepen.io/Wangxixi/pen/yWbKdg

主要使用的是CSS3的column属性，这个属性用于多列布局。

容器属性

1、column-width

语法：
```
column-width: auto | length
```
定义为每一列的最小宽度

2、column-count

语法：
```
column-count: auto | integer
```
定义列的理想数量。当容器的总宽度使column-width与column-count出现矛盾之处时，column-count失效，让位于column-width属性。

3、columns

语法：

columns: [column-width] | [column-count]

column-width 与 column-count的合并简写。

4、column-gap

语法：
```
column-gap: auto | length
```
定义列之间的水平间距，默认存在一定间距。

5、column-rule

语法：

column-rule： [column-rule-width] | [column-rule-style] | [column-rule-color]

定义列边框，是column-rule-width，column-rule-style 以及 column-rule-color 的简写

6、column-fill

语法：
```
column-fill: auto | balance
```
定义多列中每一列的高度是否统一。

分栏的属性

1、column-span

语法：
```
column-span: none | all 
```
定义一个元素横跨多少列

注意：

1、column布局高度限制的重要性：

当容器的高度没有限制时，高度默认为auto，此时分栏表现没有问题。

但是，如果设置了高度，当每一个列的内容超出时超出部分会自动生成一列，就算他们在代码上看属于同一个标签内。这样就会造成又是我们设置了column-count，但是我们在视觉上会超出我们设置的数量。

小说水平翻页实现：

从高度限制的展示上我们就可以利用这个规则来实现我们的小说水平翻页

我们把小说每一章的容器宽高设定，并使column-width等于容器宽度，这样每一章的超出文本就会按照column-width的宽度展示为每一列。

然后也设置每一章容器的父元素的宽度，并指定overflow：hidden,最后通过 JS 的 touch事件控制每一章容器的translateX水平移动就可以实现翻页效果了。

web实现小说阅读器的水平滑动翻页相关推荐

【java文本处理】实现一个简单的小说文本阅读器（分页、翻页、页码跳转）
一.目的读出文本(.txt)内容显示至dos命令窗: 按规定行数将文本进行分页: 在dos下实现文本翻页.页码跳转等功能,形成简单小说阅读器. 二.主要方法 1. RandomAccessFile类 ...
windows phone水平滑动翻页动画效果
转自:http://www.cnblogs.com/poorpan/archive/2012/04/23/2466413.html 大家看windows phone上的应用,很多都用到了这种效果 ,想 ...
【翻页电子画册制作】云展网教程 | 视图按钮：翻页书、水平滑动翻页、单页模式
通过视图按钮,阅读者可以在阅读过程中自己切换翻页模式哦. 在FLASH展示工具栏选择显示视图按钮,然后选择开放给用户阅读的翻页模式如单页按钮,滑页按钮. 视图按钮:显示视图切换按钮单页按钮:视图模式 ...
iOS 最完整小说阅读器Demo
新博客地址:https://blog.csdn.net/zz00008888 最完整小说阅读器Demo 支持字体翻页效果(无效果,平滑,仿真,上下滚动) 字体大小切换背景颜色切换等等.. 阅读记 ...
android 阅读器自动滚动,Android编程实现小说阅读器滑动效果的方法
本文实例讲述了Android编程实现小说阅读器滑动效果的方法.分享给大家供大家参考,具体如下: 看过小说都知道小说阅读器翻页有好多种效果,比如仿真翻页,滑动翻页,等等.由于某种原因,突然想写一个简单点 ...
Android本地小说阅读器（仿真、覆盖、滑动翻页，支持大文件）
项目地址:https://github.com/PeachBlossom/treader 分享下之前写的小说阅读器,项目结构是传统mvc这样来做,欢迎大家star. 如风小说阅读器,添加书签.目录跳转 ...
❤️一文掌握HTML+CSS+JS开发小说阅读器❤️
上周<让CSS3中Transform属性带你一文实现炫酷的转盘抽奖效果>博文中说到这周出一篇介绍小说阅读器开发的博文,可能是离职不上班的原因,在家变得也懒散了一些,本来是打算上周三时候动手 ...
python小说阅读器_用python实现自己的小说阅读器
前一段时间书荒的时候,在喜马拉雅APP发现一个主播播讲的小说-大王饶命.听起来感觉很好笑,挺有意思的,但是只有前200张是免费的,后面就要收费.一章两毛钱,本来是想要买一下,发现说的进度比较慢而且整本 ...
android优化中国风应用、完整NBA客户端、动态积分效果、文件传输、小说阅读器等源码...
Android精选源码 android拖拽下拉关闭效果源码一款优雅的中国风Android App源码 EasySignSeekBar一个漂亮而强大的自定义view15 android仿蘑菇街,蜜芽宝 ...

最新文章

热门文章