阅文前端团队

背景 2020 年末，工信部印发《互联网应用适老化及无障碍改造专项行动方案》通知，并把适老化及无障碍改造水平评测和企业信用评价纳为重点工作，在国家的大力倡导下，我们更应该要关注互联网应用的无障碍访问。

最近要翻新一个旧的角色关系图页面，需要优化展示角色关系，凸显人物及其关联关系。本文一步步解析下是如何实现这样的一个页面的

多行文本展开收起是一个很常见的交互， 如下图演示 实现这一类布局和交互难点主要有以下几点 位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换 当文本不超过指定行数时，不显示“展开收

随着 Mac OS、iOS 系统发布了深色外观，手机 APP 的深色模式开始出现在了大众视野，越来越多的原生 APP 为增强体验去适配 Dark Mode 深色模式。 起点读书 APP 也在近期进行了适配，包括原生页面以及 内嵌Web 端的页面 。那我们应该如何适配，才能满足既…

在实际 Web 开发过程中，总会遇到各种各样的布局。有公司同事问我这样一种布局有没有什么好的实现方式，就是一种在活动充值页非常普遍的优惠券效果，如下 首先，碰到这类布局的最佳实现肯定是mask遮罩。关于遮罩，可以看一下CSS3 Mask 安利报告。这里简单介绍一下 这里的遮罩图…

本文其实应该叫，Web 用户体验设计提升指南。 ... 所谓的用户体验设计，其实是一个比较虚的概念，是秉承着以用户为中心的思想的一种设计手段，以用户需求为目标而进行的设计。设计过程注重以用户为中心，用户体验的概念从开发的最早期就开始进入整个流程，并贯穿始终。 良好的用户体验设计…

发挥你的想象，CSS也能实现拖拽效果。 这类效果用JS可以很容易实现，无非就是多了一些计算，多考虑了一些临界场景，然后代码量也多了一些。不过，经过我的一番脑洞，发现CSS也能几乎实现这一效果，接着往下看。 在传统 web 中，页面滚动是一个很常见交互，操作上就是利用鼠标滚轮或者…

只要一提到组件化，我相信大多数同学，必然会想到 react, vue, angular… 这样的前端框架。 我们都知道 HTML，CSS，JS 分别对应网页中的结构，样式，行为。 假设现在有个功能是：一个红色按钮，点击这个按钮输出alert-text属性上的文案。 明显看出站在…

传统的swiper太重了，里面封装了很多我们不需要的功能，而一个简单的滚动功能没必要那么重的文件。于是就想着自己如何实现，如何才能用最少的代码最优雅的实现呢？是否可以推翻传统的实现，使用纯css的某些特效实现呢？ 把上面提到的三个属性放在一起就实现了平稳缓慢的滚动，再借助js移…