阅文前端团队

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

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

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

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

像上面这种评星是一种很常见的需求，我原来是借助JS实现的，没有遇到多大的挑战。 后来张老师在code review我这段代码的时候，顺便提了一嘴type="range"应该可以实现，当时的我想破脑袋也想不出来，脑子是蒙的。 后来我根据文彬的建议，继续优化我的代码，我很开心的和他…

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

在不考虑兼容性（IE8+）的情况下，SVG 应该是目前解决项目中图标问题的最佳方案，没有之一。 SVG 在变大变小的情况下不会出现失真（出现锯齿或者看到像素点），也可以像 GIF 一样可以动起来。你也不再会有只是因为同一个图标颜色不同，就需要切两张图的困扰。只要你愿意，你甚至可…

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

「用户体验 > 开发体验」Google AMP 的设计准则毫不掩饰地标记了它的核心观念，从一开始就承认了它对开发者的不友好。 「Webnovel m 站」作为国内首批使用 AMP 技术的产品「关于 AMP，Webnovel 都做了什么？」之一，结论上创造了显著提升的性能数据，过…