实现小说分页article

简介: 实现小说分页article

翻页过程

代码实现

css部分

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .wrapper {
    height: 100vh;
    overflow: hidden;
    margin: 0 16px;
  }
  article {
    columns: calc(100vw - 32px) 1;
    column-gap: 16px;
    height: 100%;
    transition: .4s;
  }

html

<div class="wrapper">
    <article onclick="changePage()">
      <h3>第一章: 我不是小说</h3>
      <p>小说内容</p>
    </article>
  </div>

js

<script>
    let i = 0;
    let article = document.querySelector('article');
    let width = document.body.offsetWidth/2;
    function changePage() {
      document.onmousedown = function (e) {
       let X = e.clientX
       if (X<=width) {
        i--
        article.style.transform = `translateX(-${(width*2 - 16) * i}px)`
       }else{
        i++
        article.style.transform = `translateX(-${(width*2 - 16) * i}px)`
       }
      }
    }
  </script>

整体

目录
相关文章
|
存储 前端开发 JavaScript
ahooks 正式发布:值得拥抱的 React Hooks 工具库
ahook定位于一套基于 React Hooks 的工具库,核心围绕 React Hooks 的逻辑封装能力,降低代码复杂度和避免团队的重复建设为背景,共同建设和维护阿里经济体层面的 React Hooks 库。
23763 1
ahooks 正式发布:值得拥抱的 React Hooks 工具库
|
存储 NoSQL Redis
Redis 中bitMap使用及实现访问量
Redis 中bitMap使用及实现访问量
288 3
|
9月前
|
人工智能
效率杀手or生产力神器?协作文档的秩序之道
在信息化社会,协作文档成为团队合作的重要工具,不仅提供便捷的协作环境,更强调秩序性,即内容的逻辑性、流程的清晰性及角色分工的明确性。优秀的协作文档平台如板栗看板、Notion和Trello,通过层级结构、标签系统、版本控制等,确保信息清晰有序,提高团队效率。未来,协作文档将结合AI技术,实现更高效的智能化协作。
|
11月前
|
API Windows
Windows之窗口原理
这篇文章主要介绍了Windows窗口原理和如何使用Windows API创建和管理窗口。
182 0
|
XML 存储 JavaScript
XML DOM - 访问节点
`getElementsByTagName()` 方法用于访问 XML 文档中的特定节点。此方法返回一个节点列表,相当于节点数组,可用来遍历和导航节点树。例如,加载 &quot;books.xml&quot; 到 xmlDoc 后,`x = xmlDoc.getElementsByTagName(&quot;book&quot;)` 将获取所有 `&lt;book&gt;` 节点,允许进一步处理每个节点。
|
Web App开发 前端开发 JavaScript
前端必备技能---今天教会你如何高效使用Chrome调试与检测你的CSS代码
教会你如何高效使用Chrome调试与检测你的CSS代码
608 0
前端必备技能---今天教会你如何高效使用Chrome调试与检测你的CSS代码
|
数据采集 机器学习/深度学习 存储
【NLP】讯飞英文学术论文分类挑战赛Top10开源多方案–5 Bert 方案
在讯飞英文学术论文分类挑战赛中使用BERT模型进行文本分类的方法,包括数据预处理、模型微调技巧、长文本处理策略以及通过不同模型和数据增强技术提高准确率的过程。
151 0
关于C++的一些小知识点
关于C++的一些小知识点
|
存储 前端开发 JavaScript
React中的闭包陷阱以及使用useRef姿势
前言 本文是昨天的续篇,昨天发了一篇闭包陷阱的文章,然后有后台的童鞋问我为什么0会无限循环,这里科普一下一个基础知识==!: setTimeout与setInterval有一个重要区别:
764 0
React中的闭包陷阱以及使用useRef姿势