前端插件制作 - 随笔分类 - 咖啡机（K.F.J）

纯JavaScript实现页面行为的录制

摘要：在网上有个开源的rrweb项目，该项目采用TypeScript编写（不了解该语言的可参考之前的《TypeScript躬行记》），分为三大部分：rrweb-snapshot、rrweb和rrweb-player，可搜集鼠标轨迹、控件交互等用户行为，并且可最大程度的回放（请看demo），看上去像是一个视阅读全文

posted @ 2020-02-17 09:19 咖啡机（K.F.J）阅读(2806) 评论(1) 推荐(1) 编辑

简单粗暴的骨架屏实现

摘要：早在2013年Luke Wroblewski就提出了骨架屏（Skeleton Screen）的概念，他认为骨架屏是一个页面的空白版本，通过这个空白版本来传递一种信息，即页面正在渐进式的加载中。骨架屏的布局能与页面的视觉呈现保持一致，这样就能引导用户的关注点聚焦到感兴趣的位置。如下图所示，左边是数据渲阅读全文

posted @ 2020-02-16 14:39 咖啡机（K.F.J）阅读(3555) 评论(0) 推荐(1) 编辑

移动端H5通用表单验证插件

摘要：将表单验证的通用部分提炼出来，做成一个简易插件，方便调用。已将源码放到GitHub上，名字叫zValidate。手机可扫描下图查看示例，PC端可点击此处查看：一、原理 1）需要引入zepto.js库，便于DOM操作。 2）将验证规则作为控件的一个属性，写在控件的html中，有点MVVM模式的味阅读全文

posted @ 2017-06-05 10:08 咖啡机（K.F.J）阅读(9366) 评论(0) 推荐(1) 编辑

移动端 H5图片裁剪插件，内置简单手势操作

摘要：前面曾经写过一篇《H5图片裁剪升级版》，但里面需要借助第三方手势库，这次就不需要使用手势库，全部封装在代码中。下图是裁剪的展示，下面就做了拖放和裁剪，没有做缩放，在插件中需要用到大量的计算。veImage的源码可以在此处浏览。一、原理 1）拖动、缩放、裁剪都是借助Canvas实现的。Canvas 阅读全文

posted @ 2017-05-02 10:14 咖啡机（K.F.J）阅读(6421) 评论(2) 推荐(3) 编辑

H5项目开发分享——用Canvas合成文字

摘要：以前曾用Canvas合成、裁剪、图片等《用H5中的Canvas等技术制作海报》。这次用Canvas来画文字。下图中“老王考到驾照后”这几个字是画在Canvas上的，与在PS中打入的字非常接近，毫无违和感。前面一段时间也在研读JavaScript设计模式相关的知识，这次正好小小的实践一下，但对设计阅读全文

posted @ 2016-12-20 09:40 咖啡机（K.F.J）阅读(2909) 评论(2) 推荐(7) 编辑

H5图片裁剪升级版

摘要：前段时间做了个跟裁剪相关的活动《用H5中的Canvas等技术制作海报》，这次公司要做个与奥运相关的活动，扫车牌赢奖。于是我就在上一个活动的基础上，将代码重新封装一下，并且将计算方式写的更通用。下图是活动中裁剪的页面：先来看看两个活动的不同： 1、原先的活动每次旋转只能90°，而此次活动可以任意角阅读全文

posted @ 2016-08-08 10:20 咖啡机（K.F.J）阅读(5727) 评论(3) 推荐(8) 编辑

订制DOM选择器

摘要：本来是打算参考zepto.js，然后将里面想要的部分抽出来做函数，随调随用。但后面发现这种写法重复代码太多，代码不整洁，于是就打算模仿下zepto的写法，挑出些比较实用的方法，造一下轮子。起名叫“iSelector”，已经放到了github上面。简单的做了封装，本来也想使用“$”相关的符号，但阅读全文

posted @ 2016-04-13 10:07 咖啡机（K.F.J）阅读(805) 评论(0) 推荐(1) 编辑

自制移动端纯原生 Slider滑动插件

摘要：在Google搜关键字“slider”或“swiper”能找到一大堆相关插件，自己造轮子是为了能更好的理解其中的原理。给这个插件取名为“veSlider”是指“very easy slider”非常简单的一个滑动插件。这只是个半成品，仅仅实现了手指滑动、自动轮播、跳转等基本功能。代码撑死了200 阅读全文

posted @ 2016-03-22 10:14 咖啡机（K.F.J）阅读(3697) 评论(5) 推荐(4) 编辑

自制jQuery焦点图切换简易插件

摘要：首页经常是需要一个焦点图切换的效果，最近做的项目也正好需要，所以在网上搜索，后面查到了一个半成品的插件，这里我自己修改了一下。 js文件夹下面有两个文件夹jquery.jslide.js与jquery.jslides.js，前面一个是我改写的，第二个是原作者的文件。下图是效果图：一、静态效果 1. 阅读全文

posted @ 2014-08-27 09:01 咖啡机（K.F.J）阅读(1271) 评论(0) 推荐(0) 编辑

自制jQuery标签插件

摘要：在项目中需要一个添加标签的小插件，查看了一些已有插件后，发现很现成的高级插件，也有比较简单的插件。最后还是决定自己来写，这样能控制代码，以后与其他插件结合使用的时候能更好的把控。初步在IE6 7 8，firefox，chrome中做了测试，可以通过。我是仿照163邮箱中添加邮箱的方式写的，插件如下阅读全文

posted @ 2014-08-25 09:01 咖啡机（K.F.J）阅读(2043) 评论(0) 推荐(2) 编辑

自制jquery可编辑的下拉框

摘要：昨天看到QQ登录的时候，可以选择以前登录过的账户，这个东西也可以在网站登录的时候用到，所以我就想做一个这样的插件；在网上查了很多，没有找到合适自己的，所以决定自动制作一个。原理就是一个textbox加一个ul模拟下拉框，用font模拟一个下拉按钮。一、制作静态效果先用css和html，做出一个阅读全文

posted @ 2014-08-01 13:08 咖啡机（K.F.J）阅读(5986) 评论(2) 推荐(0) 编辑

PHP+ajaxfileupload与jcrop插件结合完成头像上传

摘要：昨天花了点时间整合了一下头像插件东拼西凑的成果先来看下效果 1.先使用ajaxfileupload插件做异步上传。这个地方我本来想做个上传进度的效果，但技术有限失败了。上传按钮我还做了一个文件大小的限制，但是由于浏览器兼容性的问题，不完美在IE6--IE9之间还有很多问题需要解决 2.按钮上传阅读全文

posted @ 2014-06-08 14:42 咖啡机（K.F.J）阅读(1293) 评论(0) 推荐(1) 编辑

随笔分类 - 前端插件制作

公告