摘要: 首先看一下源图和转换成粒子效果的对比图: 左侧图片为源图,右侧图片为粒子效果图。该效果是在Canvas画布上制作的。将图片制作成粒子效果相对而言是比较简单的。重点了解两个知识点即可 1:图片是通过image对象形式绘制在画布上的,然后使用Canvas的getImageData接口,获取图像的像素信息 阅读全文
posted @ 2017-02-08 10:46 Jeremy阳仔 阅读(8829) 评论(1) 推荐(2) 编辑
摘要: 虽然经常说是做前端开发的,但常常使用的技术反而是JQuery比较多一点。在JavaScript的使用上相对而言少些。尤其是在创建对象使用原型链继承上面,在项目开发中很少用到。所以今天做个demo练习一下,以后忘记了也可以照搬一下。 说明一下: 1. Demo中使用的是构造函数+原型模式创建的对象。构 阅读全文
posted @ 2017-01-14 10:05 Jeremy阳仔 阅读(661) 评论(0) 推荐(0) 编辑
摘要: 前些日子不是在做 使用Jquery-UI实现一次拖拽多个选中的元素操作嘛,在持续完善这个组件时遇到了一个关于拖放排序的bug。今天就着图片和代码重现一下,也顺便告诉大家如何解决这个问题。 首先先上图描述一下问题: 先来张正常的图: 如上图,整个div层被我设置了固定高度和滚动条。页面如上所示,在可排 阅读全文
posted @ 2016-12-19 14:21 Jeremy阳仔 阅读(2022) 评论(7) 推荐(0) 编辑
摘要: 这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离。让元素都可以在网格内对齐。先上效果图,然后在详细说明一下细节问题 做了一个gif图,可以看到,每次元素的移动都是按照最小单位距离移动的。且每次元素都是对齐到网格的。 先根据demo说 阅读全文
posted @ 2016-11-30 11:09 Jeremy阳仔 阅读(3285) 评论(1) 推荐(6) 编辑
摘要: 最近看一下css3d的一些特性,想着也实验学习一下,制作个小demo之类的。就练习了一下。开发一个粗糙的选择木马效果,如图 其实就是找到角度和位置,计算每根柱子的旋转角度摆放到3d空间的置顶位置即可。然后利用css的animate属性让3d舞台无线旋转,就有了一简易的旋转木马效果。感兴趣的可以看一下 阅读全文
posted @ 2016-11-24 16:58 Jeremy阳仔 阅读(1613) 评论(0) 推荐(0) 编辑
摘要: 以一个前端开发的身份绘制一个简单的蛋糕庆祝一下今天这个好日子吧,程序员庆生的乐趣与哀愁啊。写的比较简陋,感兴趣的看一下吧。 先发个效果图吧 蛋糕分为三个部分,底部蛋糕,顶层蛋糕和蜡烛部分。HTML的布局结构也是按照这三部分布局的。另外就是使用CSS定位和CSS3的rotate,内外阴影等效果调整部分 阅读全文
posted @ 2016-11-16 16:14 Jeremy阳仔 阅读(3824) 评论(0) 推荐(1) 编辑
摘要: 项目需要,实现一个拖放操作,要求每次可以拖拽选中的多个元素,释放到目标容器后可排序。考虑了一下,觉得jquery-ui比较合适,毕竟它提供了项目需要的交互性事件机制。拖拽、释放、排序、选择等效果。而在实际的操作中,遇到个很多的问题,说明一下,最后附上效果图和代码。 1.本人使用的bootstrap框 阅读全文
posted @ 2016-10-28 10:40 Jeremy阳仔 阅读(7263) 评论(3) 推荐(0) 编辑
摘要: 之前看别人写的插件经常会用到RegExp对象来验证输入,并且获取一些那时我并不晓得是什么东西的数组,来取值进行自定义的逻辑处理。今天学习了一下RegExp类型。终于有了一个初步的了解,至少不会看一会就感觉蒙圈了,记录分享一下 ECMAScript通过RegExp类型来支持正则表达式 语法如下 其中 阅读全文
posted @ 2016-10-12 16:39 Jeremy阳仔 阅读(5809) 评论(0) 推荐(1) 编辑
摘要: 在前端开发工作中,会遇到这样问题:针对同一个dom元素,即希望为它绑定click事件,又想该元素可以允许拖拽的效果。而使用拖拽的效果,我们一般就会用到mousedown,mousemove和mouseup事件。但mousedown、mouseup就会和click事件发生冲突。我们希望在拖拽元素的时候 阅读全文
posted @ 2016-09-22 16:32 Jeremy阳仔 阅读(25164) 评论(2) 推荐(2) 编辑
摘要: Array类型是ECMAScript中最常用的类型之一,ECMAScript中的数组与其他多数语言中的数组有着相当大的区别。ECMAScript数组的每一项可以保存任何类型的数据。这里总结了数组类型的大多数方法,方便以后查找使用。 一、创建数组的基本方式 创建数据的基本方式有两种: 1.使用Arra 阅读全文
posted @ 2016-09-08 17:11 Jeremy阳仔 阅读(1182) 评论(0) 推荐(1) 编辑