游戏 贪吃蛇 坦克大战 其他 draft.js富文本编辑器 localStorage日历 跟随鼠标移动的文字特效 鼠标轨迹转svg
移动端页面元素尺寸解决方案之一
如果html5要适应各种分辨率的移动设备,应该使用rem这样的尺寸单位.主流做法基本也都是这样做的.但是,如果html5页面是在webview中打开的,并且webview不是通常的手机视窗尺寸,而是占了部分页面,使用rem单位的转化标准就没有了通用性.面对这种情况,可以尝试以下的解决方案. 使用tr ...
使元素的高度根据宽度变化的一种实现方式
如果padding属性的值是百分比值,这个值是根据父元素的宽度(X周属性)计算的,即使是Y轴上的padding(padding-top,padding-bottom)也是如此,根据这个特性,可以实现Y轴尺寸和X轴尺寸相关联的效果.比如这样写css:.target { width: 50% ...
从两个需求说起svg路径动画
一、从一次需求说起在做一个在线课件的项目,类似于web端在线的ppt制作工具。制作课件避免不了各种进入退出动画,ppt有的,公司工具也必须有。各种淡入淡出,从上、下、左、右方向飞出飞入,css3动画安排上!正在我写的不亦乐乎,觉得微软入场动画也不过如此的时候,产品经理来了。“ppt有的动画咱们工具必 ...
思考如何设计好维护的前端组件
在写平时工作写业务代码的时候,为了开发效率而忽略了前端组件的合理设计。导致后期需求迭代和修改bug的时候,维护困难,更不用说维护代码的人可能并不是代码的开发者。思考了一下如何设计出更好维护的前端组件,适用于react和vue。以下只是我个人的粗浅观点,分享出来大家一起交流。 写下任何代码前画出整个 ...
使用draft.js构建富文本编辑器
Draft.js是一个构建富文本编辑器的React框架, 它不是一个富文本编辑器的组件库. draft.js提供构建编辑器的工具, 如何实现, 需要开发者自己去设计. 砖头和水泥都有了, 就差个程序员去盖房子了. 特点 大部分编辑器保存的富文本数据都是html, 数据不够结构化, 查询修改数据很 ...
记录鼠标轨迹, 生成svg路径
业务上遇到了这样的问题, 在浏览器中, 使元素沿着用户画出的路径移动. 因为让元素沿着svg路径移动已经实现了, 所以需要做的是用鼠标画出路径. 鼠标方法只能获取鼠标在页面中的实时坐标, 是离散的坐标点, 如何将这些坐标点转化成平滑的路径是问题的关键. ...