随笔分类 - 前端插件制作
纯JavaScript实现页面行为的录制
摘要:在网上有个开源的rrweb项目,该项目采用TypeScript编写(不了解该语言的可参考之前的《TypeScript躬行记》),分为三大部分:rrweb-snapshot、rrweb和rrweb-player,可搜集鼠标轨迹、控件交互等用户行为,并且可最大程度的回放(请看demo),看上去像是一个视
阅读全文
简单粗暴的骨架屏实现
摘要:早在2013年Luke Wroblewski就提出了骨架屏(Skeleton Screen)的概念,他认为骨架屏是一个页面的空白版本,通过这个空白版本来传递一种信息,即页面正在渐进式的加载中。骨架屏的布局能与页面的视觉呈现保持一致,这样就能引导用户的关注点聚焦到感兴趣的位置。如下图所示,左边是数据渲
阅读全文
移动端H5通用表单验证插件
摘要:将表单验证的通用部分提炼出来,做成一个简易插件,方便调用。 已将源码放到GitHub上,名字叫zValidate。 手机可扫描下图查看示例,PC端可点击此处查看: 一、原理 1)需要引入zepto.js库,便于DOM操作。 2)将验证规则作为控件的一个属性,写在控件的html中,有点MVVM模式的味
阅读全文
移动端 H5图片裁剪插件,内置简单手势操作
摘要:前面曾经写过一篇《H5图片裁剪升级版》,但里面需要借助第三方手势库,这次就不需要使用手势库,全部封装在代码中。 下图是裁剪的展示,下面就做了拖放和裁剪,没有做缩放,在插件中需要用到大量的计算。veImage的源码可以在此处浏览。 一、原理 1)拖动、缩放、裁剪都是借助Canvas实现的。Canvas
阅读全文
H5项目开发分享——用Canvas合成文字
摘要:以前曾用Canvas合成、裁剪、图片等《用H5中的Canvas等技术制作海报》。这次用Canvas来画文字。 下图中“老王考到驾照后”这几个字是画在Canvas上的,与在PS中打入的字非常接近,毫无违和感。 前面一段时间也在研读JavaScript设计模式相关的知识,这次正好小小的实践一下,但对设计
阅读全文
H5图片裁剪升级版
摘要:前段时间做了个跟裁剪相关的活动《用H5中的Canvas等技术制作海报》,这次公司要做个与奥运相关的活动,扫车牌赢奖。 于是我就在上一个活动的基础上,将代码重新封装一下,并且将计算方式写的更通用。下图是活动中裁剪的页面: 先来看看两个活动的不同: 1、原先的活动每次旋转只能90°,而此次活动可以任意角
阅读全文
订制DOM选择器
摘要:本来是打算参考zepto.js,然后将里面想要的部分抽出来做函数,随调随用。 但后面发现这种写法重复代码太多,代码不整洁,于是就打算模仿下zepto的写法,挑出些比较实用的方法,造一下轮子。 起名叫“iSelector”,已经放到了github上面。 简单的做了封装,本来也想使用“$”相关的符号,但
阅读全文
自制 移动端 纯原生 Slider滑动插件
摘要:在Google搜关键字“slider”或“swiper”能找到一大堆相关插件,自己造轮子是为了能更好的理解其中的原理。 给这个插件取名为“veSlider”是指“very easy slider”非常简单的一个滑动插件。 这只是个半成品,仅仅实现了手指滑动、自动轮播、跳转等基本功能。代码撑死了200
阅读全文
自制jQuery焦点图切换简易插件
摘要:首页经常是需要一个焦点图切换的效果,最近做的项目也正好需要,所以在网上搜索,后面查到了一个半成品的插件,这里我自己修改了一下。 js文件夹下面有两个文件夹jquery.jslide.js与jquery.jslides.js,前面一个是我改写的,第二个是原作者的文件。下图是效果图: 一、静态效果 1.
阅读全文
自制jQuery标签插件
摘要:在项目中需要一个添加标签的小插件,查看了一些已有插件后,发现很现成的高级插件,也有比较简单的插件。最后还是决定自己来写,这样能控制代码,以后与其他插件结合使用的时候能更好的把控。初步在IE6 7 8,firefox,chrome中做了测试,可以通过。 我是仿照163邮箱中添加邮箱的方式写的,插件如下
阅读全文
自制jquery可编辑的下拉框
摘要:昨天看到QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件;在网上查了很多,没有找到合适自己的,所以决定自动制作一个。 原理就是一个textbox加一个ul模拟下拉框,用font模拟一个下拉按钮。 一、制作静态效果 先用css和html,做出一个
阅读全文
PHP+ajaxfileupload与jcrop插件结合 完成头像上传
摘要:昨天花了点时间整合了一下头像插件 东拼西凑的成果 先来看下效果 1.先使用ajaxfileupload插件做异步上传。 这个地方我本来想做个上传进度的效果,但技术有限失败了。上传按钮我还做了一个文件大小的限制,但是由于浏览器兼容性的问题,不完美在IE6--IE9之间还有很多问题需要解决 2.按钮上传
阅读全文