随笔分类 -  JavaScript

Canvas + JavaScript 制作图片粒子效果
摘要：首先看一下源图和转换成粒子效果的对比图： 左侧图片为源图，右侧图片为粒子效果图。该效果是在Canvas画布上制作的。将图片制作成粒子效果相对而言是比较简单的。重点了解两个知识点即可 1:图片是通过image对象形式绘制在画布上的，然后使用Canvas的getImageData接口，获取图像的像素信息 阅读全文
posted @ 2017-02-08 10:46 Jeremy阳仔 阅读(9211) 评论(1) 推荐(2)
JavaScript构造函数+原型创建对象，原型链+借用构造函数模式继承父类练习
摘要：虽然经常说是做前端开发的，但常常使用的技术反而是JQuery比较多一点。在JavaScript的使用上相对而言少些。尤其是在创建对象使用原型链继承上面，在项目开发中很少用到。所以今天做个demo练习一下，以后忘记了也可以照搬一下。 说明一下： 1. Demo中使用的是构造函数+原型模式创建的对象。构 阅读全文
posted @ 2017-01-14 10:05 Jeremy阳仔 阅读(672) 评论(0) 推荐(0)
解决JqueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug
摘要：前些日子不是在做 使用Jquery-UI实现一次拖拽多个选中的元素操作嘛，在持续完善这个组件时遇到了一个关于拖放排序的bug。今天就着图片和代码重现一下，也顺便告诉大家如何解决这个问题。 首先先上图描述一下问题： 先来张正常的图： 如上图，整个div层被我设置了固定高度和滚动条。页面如上所示，在可排 阅读全文
posted @ 2016-12-19 14:21 Jeremy阳仔 阅读(2093) 评论(7) 推荐(0)
JavaScript实现拖拽元素对齐到网格（每次移动固定距离）
摘要：这几天在做一个拖拽元素的附加功能，就是对齐到网格，实际上就是确定好元素的初始位置，然后拖拽元素时，每次移动固定的距离。让元素都可以在网格内对齐。先上效果图，然后在详细说明一下细节问题 做了一个gif图，可以看到，每次元素的移动都是按照最小单位距离移动的。且每次元素都是对齐到网格的。 先根据demo说 阅读全文
posted @ 2016-11-30 11:09 Jeremy阳仔 阅读(3391) 评论(1) 推荐(6)
使用 Jquery-UI 实现一次拖拽多个选中的元素操作
摘要：项目需要，实现一个拖放操作，要求每次可以拖拽选中的多个元素，释放到目标容器后可排序。考虑了一下，觉得jquery-ui比较合适，毕竟它提供了项目需要的交互性事件机制。拖拽、释放、排序、选择等效果。而在实际的操作中，遇到个很多的问题，说明一下，最后附上效果图和代码。 1.本人使用的bootstrap框 阅读全文
posted @ 2016-10-28 10:40 Jeremy阳仔 阅读(7407) 评论(3) 推荐(0)
RegExp类型exec()方法的返回值说明
摘要：之前看别人写的插件经常会用到RegExp对象来验证输入，并且获取一些那时我并不晓得是什么东西的数组，来取值进行自定义的逻辑处理。今天学习了一下RegExp类型。终于有了一个初步的了解，至少不会看一会就感觉蒙圈了，记录分享一下 ECMAScript通过RegExp类型来支持正则表达式 语法如下 其中 阅读全文
posted @ 2016-10-12 16:39 Jeremy阳仔 阅读(5896) 评论(0) 推荐(1)
JavaScript区分click事件和mousedown（mouseup、mousemove）方法
摘要：在前端开发工作中，会遇到这样问题：针对同一个dom元素，即希望为它绑定click事件，又想该元素可以允许拖拽的效果。而使用拖拽的效果，我们一般就会用到mousedown,mousemove和mouseup事件。但mousedown、mouseup就会和click事件发生冲突。我们希望在拖拽元素的时候 阅读全文
posted @ 2016-09-22 16:32 Jeremy阳仔 阅读(25854) 评论(2) 推荐(2)
JavaScript中Array类型方法总结
摘要：Array类型是ECMAScript中最常用的类型之一，ECMAScript中的数组与其他多数语言中的数组有着相当大的区别。ECMAScript数组的每一项可以保存任何类型的数据。这里总结了数组类型的大多数方法，方便以后查找使用。 一、创建数组的基本方式 创建数据的基本方式有两种： 1.使用Arra 阅读全文
posted @ 2016-09-08 17:11 Jeremy阳仔 阅读(1193) 评论(0) 推荐(1)
ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave由于鼠标移动速度过快导致问题解决办法
摘要：记录两个项目开发中遇到的问题，一个是ECharts外部调用保存为图片操作，一个是workflow工作流连接曲线onmouseenter和onmouseleave事件由于鼠标移动过快触发问题。 一、外部按钮调用ECharts图表的保存为图片操作 最近使用ECharts库绘制图表，依据需求希望可以把图表 阅读全文
posted @ 2016-08-29 15:57 Jeremy阳仔 阅读(3265) 评论(2) 推荐(1)
web前端交互性易用性说明
摘要：总结一下我们在web前端开发过程中总是强调交互性、易用性的情况分析说明。个人觉得web前端的易用交互也就是我们所说人性化操作。不外乎希望达到的效果为：界面风格简洁明了、重点突出；操作简单，直观可见。当然，我们都清楚，web界面的使用主要体现在两大方面。一个是界面风格、一个是事件机制。而从这两大方面分 阅读全文
posted @ 2016-08-25 10:01 Jeremy阳仔 阅读(2948) 评论(0) 推荐(0)
JavaScript一些基础技巧和注意事项，你了解这些吗?
摘要：总结了一些JavaScript在开发编码中的使用技巧，如有不对，欢迎指正。 一、JavaScript在HTML和XHTML的使用 使用<script>元素有两种方式：直接在页面中嵌入JavaScript代码和引入外部JavaScript文件。 1. 先说一下在HTML页面使用内嵌的JavaScrip 阅读全文
posted @ 2016-08-11 20:33 Jeremy阳仔 阅读(465) 评论(0) 推荐(0)
JQuery+HTML5+CSS3制作时间轴插件，支持响应式布局
摘要：一、效果图预览 （图一） (图二) 附注说明： 图一是浏览器宽度像素大于560px下的展示效果，图二是在浏览器宽度像素小于560px下的展现效果。使用的是CSS3的Media Query（媒体查询）实现的效果。 另外页面中圆形、圆角和三角同样使用了CSS3的特殊样式。这些基础的样式和效果在本文中不会 阅读全文
posted @ 2016-08-09 16:53 Jeremy阳仔 阅读(7036) 评论(2) 推荐(0)
JavaScript + SVG实现Web前端WorkFlow工作流DAG有向无环图
摘要：一、效果图展示及说明 （图一） （图二） 附注说明： 1. 图例都是DAG有向无环图的展现效果。两张图的区别为第二张图包含了多个分段关系。放置展示图片效果主要是为了说明该例子支持多段关系的展现（当前也包括单独的节点展现，图例没有展示） 2.图例中的圆形和曲线均使用的是SVG绘制。之前考虑了三种方式， 阅读全文
posted @ 2016-08-08 17:33 Jeremy阳仔 阅读(14610) 评论(3) 推荐(1)