摘要: 一般情况下 CSS 并不会影响 JS 事件,但有一个 CSS 属性则比较特殊,那就是 pointer-events,它可以用来规避鼠标事件,其中大部分属性值只适用于 SVG(可缩放矢量图形)操作,而我们只需要关注其 none 属性值,该值表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。 阅读全文
posted @ 2022-08-22 18:39 茶无味的一天 阅读(15) 评论(0) 推荐(0) 编辑
摘要: 颜色一直是UI设计师们非常敏感的问题,我至今仍忘不了那天,一位萌新设计师在走查UI时,给我提了好几个Bug,大多是颜色有差异问题,我当时的第一反应是去检查代码,排查了半天确认自己没有写错色值后,我就在想会不会是取色的问题?于是我做了个试验,在网页上设置一个背景色,然后用Chrome自带的取色器吸了一 阅读全文
posted @ 2022-08-19 11:41 茶无味的一天 阅读(6) 评论(0) 推荐(0) 编辑
摘要: 我们都知道有两种盒模型,w3c盒模型和IE盒模型。content-box,顾名思义,即width就是内容宽度,和边框边距相互独立,反过来 border-box 就是宽度包含了padding和border,相互影响。 现代浏览器默认的都是w3c标准,但IE盒模型并非一无是处,甚至很多情况下它会更好用, 阅读全文
posted @ 2022-08-17 20:52 茶无味的一天 阅读(15) 评论(0) 推荐(0) 编辑
摘要: 在某些业务场景下,接入第三方库实现轮播图效果可能并没有那么好用,笔者在接入Swiper插件失败后,还是决定手写一个。那么关于手写轮播图有很多文章已经讲过了,其核心原理是将图片排成一排,设置外层的Div超出隐藏,然后改变定位来实现轮播效果,这样通常不能首尾循环滚动,本文记录了一种对无限循环滚动效果的实 阅读全文
posted @ 2022-08-15 17:29 茶无味的一天 阅读(24) 评论(0) 推荐(0) 编辑
摘要: 我正在参加「创意开发 投稿大赛」详情请看:掘金创意开发大赛来了! 先来看看b站的一键三连是什么效果: 不难观察出以下几个特点: 长按点赞出现抖动动画 长按点赞时关联按钮会有圆环进度条效果 长按超过一段时间后放开则一次实现三个动作并且有个绽放特效 接下来我们要做的就是逐步实现这些步骤,如何开始呢?这就 阅读全文
posted @ 2022-08-10 11:49 茶无味的一天 阅读(33) 评论(0) 推荐(0) 编辑
摘要: 我正在参与掘金创作者训练营第5期,点击了解活动详情 node.js 初探 Node.js 是一个 JS 的服务端运行环境,简单的来说,它是在 JS 语言规范的基础上,封装了一些服务端的运行时对象,让我们能够简单实现非常多的业务功能。 如果我们只使用 JS 的话,实际上只是能进行一些简单的逻辑运算。n 阅读全文
posted @ 2022-08-02 19:17 茶无味的一天 阅读(8) 评论(0) 推荐(0) 编辑
摘要: 项目の初 该从哪里说起呢。。回想当时我还在做着一些零散的项目需求,这时候领导给了我一个任务,说让我重构一个“在线PS”,我一听哎,这有点意思了,但是它并没有立项,是的,直到我做了一个多月,团队里还没有其他人知道这个项目的存在,所以我要在搞完其他需求之后挤出来的时间里完成它的开发(因为连PM都不清楚我 阅读全文
posted @ 2022-06-27 21:59 茶无味的一天 阅读(39) 评论(0) 推荐(0) 编辑
摘要: 前篇:# (一) 基本功能 、 # (二) 常用参数实现、 # (三) 页面处理 JS实现异步任务队列 由于截图服务每次执行任务都需要占用不少时间和性能,且服务器资源有限,如果截图服务并发请求数量过高,必然会引起问题,此时就需要一个异步任务队列来对并发的浏览器数量进行控制。 对 queue 感到陌生 阅读全文
posted @ 2022-06-27 01:00 茶无味的一天 阅读(105) 评论(0) 推荐(0) 编辑
摘要: # (一) 基本功能 # (二) 常用参数实现 如何在页面中判断图片已加载完成 主动调用注入函数进行截图的场景,通常都是我们自己的业务页面,这时我们可以在页面中对资源加载情况进行判断,来决定截图的时机。 起初我的想法是把图片url链接传进一个处理函数,函数中用Image对象加载src,当实例对象触发 阅读全文
posted @ 2022-06-25 01:19 茶无味的一天 阅读(45) 评论(0) 推荐(0) 编辑
摘要: 本篇主要介绍一些参数实现,完整文章目录: # (一) 基本功能 # (二) 常用参数实现 # (三) 页面处理的方法 # (四) 项目优化及部署相关 页面等待 有时我们可能希望让页面等待一段时间再执行截图,当使用await page.waitFor(1000)来让页面等待时会提示该方法将被弃用: w 阅读全文
posted @ 2022-06-23 09:37 茶无味的一天 阅读(47) 评论(0) 推荐(0) 编辑