摘要：
demo演示：用到的一些绘制方法说明：context.translate(x,y)方法，重新设置画布的坐标源点，设置后，x,y坐标处为变为起始坐标(0,0);context.arc(圆心x坐标, 圆心Y坐标, 圆半径, 起始弧度,结束点弧度, 是否顺时针)方法绘制圆形，或者圆弧;context.rotate(弧度) 方法接受一个弧度制参数，旋转画布，然后绘制图形，相当于给绘制的图形旋转一个角度；context.save() 和context.restore() 方法，记录起始状态和回复状态context.fillRect(矩形左上角X坐标，Y坐标，宽度，高度): 绘制矩形context.fil 阅读全文
随笔分类 - JS
JavaScript单元测试工具使用—QUnit
2013-01-17 22:16 by VVG, 2085 阅读, 收藏, 编辑
摘要：
本文绝大部分来自于http://www.oncoding.cn/2010/javascript-unit-testing-qunit/，由于最新版的QUNIT更改了API接口，本文稍作修改。QUnit是jQuery团队开发的JavaScript单元测试工具，使用方便，界面美观。什么是单元测试？单元测试又称为模块测试，是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。单元测试主要是用来检验程式的内部逻辑，也称为个体测试、结构测试或逻辑驱动测试。通常由撰写程式码的程式设计师负责进行。通常来说，程式設計師每修改一次程式就會進行最少一次單元測試，在編寫程式的過程中前後很可能要進行多次單元 阅读全文
JS Tween动画效果研究 : - )Tween公式使用
2013-01-16 17:20 by VVG, 13528 阅读, 收藏, 编辑
摘要：
先看iframe一下DEMO：DEMO:点击直接查看Tween中的方法接受4个参数t,b,c,d 。返回值为计算后的当前位置.t => time(初始记步次数) b => begin(初始位置) c => change(变化量) d => duration(持续次数)如：Quad:{ easeIn:function (t, b, c, d) { return c * (t /= d) * t + b; }, easeOut:function (t, b, c, d) { ... 阅读全文
jQuery DOMready 页面加载事件 研究
2013-01-13 22:42 by VVG, 1490 阅读, 收藏, 编辑
摘要：
jQuery中的ready事件原型，在这里提取出来便于理解，代码+注释 如下： // 事件队列 var EventQueue = null; // 是否已经执行过了，只执行一次 var isFire = false; //添加ready事件 function addReadyEvent(fn){ if(!EventQueue) EventQueue = []; if(document.readyState == 'complete'){ fn(); }else{ Event... 阅读全文
HTML5 canvas banner广告编辑插件，canvas画图实例
2012-12-01 14:49 by VVG, 3900 阅读, 收藏, 编辑
摘要：
请用谷歌或则火狐浏览器浏览！DEMO演示：点击演示DEMO下载：点击下载利用HTML5 canvas中的canvas.toDataURL 可以对画布进行输出操作，可以利用这个特性做出图像的裁剪功能以前要做裁剪操作需要传递数据到后端，如PHP，利用相应的图像操作函数操作保存！现在使用HTML5方便多了截图演示：输出图片：关键代码：1、使用FileReader读取FILE表单文件Filereader有下面几种方法,预览图片用到的是readAsDataURL。方法名参数描述abortnone中断读取readAsBinaryStringfile将文件读取为二进制码readAsDataURLfile将文 阅读全文
用Javascript replace方法完成代码高亮插件——支持JS\CSS\HTML(支持html里面的JS,CSS)
2012-11-22 20:30 by VVG, 2995 阅读, 收藏, 编辑
摘要：
看到语法高亮的帖子，然后下班路上想了一下，有一个具体的思路，但是不知道别人如何实现，总觉得自己想法会太复杂，主要就是用到Javascript的字符串的处理方法replace，然后利用正则表达式替换包裹HTML标签，全程都是字符串的处理，输出的也是字符串。先把自己实现的发上来，只是简单的字符串替换，复杂的情况还满足不了，特别是特殊的注释与正则表达式不能够很好的识别点击下载此代码演示如下：语法高亮在这里输入代码: .codePre span.lineComment { color: #808080; } .codePre span.lineComment span { color: #... 阅读全文
Javascript 瀑布流实现的两种方式：固定列数的浮动布局与绝对定位自适应宽度
2012-09-10 22:36 by VVG, 10512 阅读, 收藏, 编辑
摘要：
瀑布流已经火了一段时间了，自己最近研究了一下，网上关于瀑布流的帖子也很多，网上一般是说三种方式，固定列数的浮动布局，CSS3列布局，绝对定位布局推荐两个关于瀑布流的帖子，写得比我详细多了：迅雷的：http://cued.xunlei.com/log031张鑫旭的：网址太长点我这里主要是记录一下我的实现方式，用数组模拟的数据，也可以用AJAX实现读取数据，底部提供DEMO代码下载！一、固定列数的浮动布局 这种方式简单适用，先按照列数把布局固定好，然后在滚动事件中分别在每一列插入相应的数据既可，代码比较简单： 其实就一个滚动加载事件。我这里没有做按高低排序。 点击查看DEMO演示 代码如... 阅读全文
常用关于 JavaScript 中的跨域访问方法
2012-08-15 11:44 by VVG, 4498 阅读, 收藏, 编辑
摘要：
JS中的跨域是受到限制的，但是跨域有时候又是必须的，藉此，各种高手牛人想尽办法使得JS能够跨域获取数据，有的方法真的很巧妙在此记录一下常用的三种跨域方法，如下：一、不同子域名之间的(a.example.com|b.example.com)的跨域访问。 这种跨域调用比较常见，比如a.example.com 下的 a.htm 页面，需要调用 b.example.com 下的 b.htm页面里面的getData函数， 首先需要在a.htm页面中用iframe 框架把b.htm页面引用进来<iframe id="b" src="http://b.example.co 阅读全文
javascript 打造城市选择控件，兼容IE6以及以上，谷歌，Firefox
2012-07-13 22:18 by VVG, 9980 阅读, 收藏, 编辑
摘要：
在淘宝旅行上看到的城市选择效果，感觉还不错，就自己的理解重新实现一遍，先看效果，然后再细说实现原理，支持鼠标上下键选择城市，支持直接输入城市名称，拼音首字母，全拼，支持IE6遮盖SELECT，压缩后12K，Demo如下：修正1：IE9的BUG我查了有点莫名其妙，但是去掉.cityBox这个CSS里面的box-shadow: 2px 2px 3px rgba(0,0,0,0.3);这段CSS，就可以了。最新的修改过的JS，在底部贴出来了，下载的那个没有更新，如果要用请直接在下面复制代码！Demo出发城市： 到达城市： 我实现的步骤：一、先用一定的格式罗列出控件所需要的城市以及拼音等，我这里是按照 阅读全文
js简单仿苹果菜单图片效果
2012-07-05 23:04 by VVG, 713 阅读, 收藏, 编辑
摘要：
DEMO演示：点我点我点我思路：通过计算鼠标与图片的位置来设定图片的大小<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>仿苹果菜单</title> <style type="text/css"> #menu li{float:left; list-style: none; margin-left: 5px;} #menu{ display: inline-block;} body{ text-align: 阅读全文
Javascript Lazyload延迟加载特效
2012-06-25 17:25 by VVG, 5846 阅读, 收藏, 编辑
摘要：
Javascript Lazyload延迟加载特效,有效降低HTPP连接次数，提高首屏加载时间1、增加了图片预加载可选2、修改了图片本身就在可视范围的时候直接显示而不需要滚动条触发3、修改了Splice删除数组的时候，会跳过下一张图片BUG4、浏览器窗口resize的时候图片出现也会加载5、判断图片父层包裹顶部或者底部出现在可视范围内即可显示图片源代码在底部，效果如下：延时加载 主要代码如下：var Lazy = { $:function(arg,context){ var tagAll,n,eles=[],i,sub = arg.substring(1)... 阅读全文
JS制作简单的日历控件【JS Date对象操作实例演示】
2012-06-24 22:36 by VVG, 18968 阅读, 收藏, 编辑
摘要：
JS制作简单的日历控件【JS Date对象操作实例】一直对JS 中的Date 对象不是很熟练，缺乏操作实践，端午节抽空复习了一下，做了一个简单的日期选择控件日历外观参考了淘宝旅行中的日期控件，控件只有基本功能，木有做节日显示：2012年7月14日 增加了IE6的selectBUG，遮挡问题，修改了两个日历能够同时出现的问题。使用方法：只需传入日期INPUT元素的ID即可，isSelect选项为是否为SELECT下拉选择年月设置var myDate1 = new Calender({id:'j_Date1'});var myDate2 = new Calender({id: 阅读全文
Javascript 拼图游戏,可以自定义图片拼图,可以设置无限关卡，拼图成功后含动画效果
2012-06-01 23:45 by VVG, 5594 阅读, 收藏, 编辑
摘要：
基本就是拖拽功能的应用，其它鼠标事件绑定，距离的计算，动画等，也有很多细节问题，需要亲自做了才知道，支持IE系列，FIREFOX，chrome浏览器,IE6下可能有点卡。过关卡的时候需要下载下一张图片，如果网速慢则会暂时停止一下，稍等一会就可以接着下一关。玩到最后一关就可以自定义图片拼图了,只需要输入图片的地址就可以了!如果需要直接自定义图片，则用谷歌浏览器或者FIREBUG把隐藏的Id 为imgDiy 的层显示出来就可以了.DEMO演示：点击试玩源代码下载：点击下载IFREAME演示:就不解释了，我源代码里面的注释写得很清楚，有兴趣的可以看一下源代码，如下：<!DOCTYPE html 阅读全文
缓动与二次函数 抛物线图练习
2012-05-28 21:57 by VVG, 1063 阅读, 收藏, 编辑
摘要：
我们知道抛物线的公式为:y = ax^2 + bx + c(按经过原点的时候c为0)在这里我们可以把Y看成距离，x看成是时间，那么这个公式就是时间与位移的关系；可以通过已知的起点，和终点坐标，求出a、b的值，下面是已经求出a、b值的一个公式的显示图如果点击按钮没反应，请刷新S=-0.002t^2+2ty=ax^2+bxs(位移500px) t(时间778ms) moveMthod(移动距离，移动所需时间毫秒)源代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://w 阅读全文
使用requestAnimationFrame更好的实现javascript动画（kimhou 译）
2012-05-28 14:05 by VVG, 491 阅读, 收藏, 编辑
摘要：
一直以来，JavaScript的动画都是通过定时器和间隔来实现的。虽然使用CSS transitions 和 animations使Web开发实现动画更加方便，但多年来以JavaScript为基础来实现动画却很少有所改变。直到Firefox 4的发布，才带来了第一种对JavaScript动画的改善的方法。但要充分认识改善，这有利于帮助我们了解web动画是如何演变改进的。定时器Timer 用于创建动画的第一个模式是使用链式setTimeout()调用。在Netscape 3′s hayday的很长一段时期，开发者都记得一种在网络上随处可见的固定式最新行情状态栏，通常它类似于这样：(func... 阅读全文
JS拖拽，移动与拉伸
2012-05-17 14:02 by VVG, 3844 阅读, 收藏, 编辑
摘要：
上次做的简单的拖拽：javascript简单拖拽练习(鼠标事件 mousedown mousemove mouseup)这次增加了一些相关的功能，增加四个角的拉伸改变宽度，主要还是用到一些简单的坐标位置计算，没有什么技术难度，熟练了一下自己对拖拽的运用不晓得为什么粘贴到博客园上就不支持IE6了，直接在本地是支持IE6的，有个问题就是，鼠标点击的时候光标会变为选择文字的光标，不知道应该怎么处理这个问题呢？DEMO如下：按此处拖动中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间 内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容 阅读全文
原生javascript淡入淡出焦点图 + Jquery实现方法
2012-05-13 10:19 by VVG, 4697 阅读, 收藏, 编辑
摘要：
淡入淡出焦点图效果类这里是缓动焦点图链接：JavaScript 缓动焦点图实现的几种写法 封装 + 函数式 + JQuery焦点图实现思路：原生JS的类的调用方式： var slider1 = new Slider({ id:'focus_pic', /**包裹图片的UL的ID**/ btnId:"focus_btn", //幻灯片按钮的ID,可以用来控制CSS显示 //step:5, //透明度变化步长，默认为2 autoTime:2000//自动播放间隔时间 });幻灯片的H... 阅读全文
Prototype1.4.0 源码解析
2012-05-10 16:26 by VVG, 2843 阅读, 收藏, 编辑
摘要：
抽几天时间看了一下Prototype.js 的源代码，有些地方还没有彻底理解，但总算是扒完了。本来就不会用Prototype框架，所以对某些方法理解也是半知半解，带<?>的我都不敢确定。注释结合了一些实例，比较容易理解，有些地方上下结合的看起来有些费力，这里多亏webStorm 编辑器的ctrl+shift+i 的调出相关方法的功能非常好用，看完也算对Prototype有一些初步理解，对里面的枚举对象印象深刻，ajax部分有些绕还需多读几遍，总体还是迷迷糊糊，请大家有空挑挑错！/* Prototype JavaScript framework, version 1.4.0 * (c 阅读全文
Javascript 表单验证对象控件 + ajax简单验证重复项与ajax提交数据
2012-05-06 12:31 by VVG, 5182 阅读, 收藏, 编辑
摘要：
前几日做了表单验证的控件，近日做了一些修改，增加了AJAX的简单验证，AJAX的提交，后台程序使用PHP+MYSQL，所以又对此文进行修改，表单验证部分基本没变，修改了以前的一个小BUG，对JS代码做了分离到一个JS的文件的处理。-----------------------------------------------------------------------------------------------------构造函数需要传递三个参数，一个是对应form的ID，另一个是options对象（包含匹配的正则表达式，和出错提示），最后一个是表单Ajax提交的URL,带URL的时候按 阅读全文
原创JS模拟Alert弹出框效果--自定义CSS样式
2012-04-26 11:35 by VVG, 46685 阅读, 收藏, 编辑
摘要：
由于系统默认alert弹出窗口不能自定义样式，有可能不符合网站的风格，虽然网上应该有很多这样的JS但是还是自己写的比较放心，顺便练习一下对DOM的操作支持IE6下的SELECT不能遮罩的问题，谷歌支持圆角，IE6下就比较丑了，四四方方的，不过可以自定义自己喜欢的样式听取建议后，修改了position:fixed, IE6下用hack处理了。点击看效果:点击模拟Alert弹出框点击模拟Alert弹出框点击模拟Alert弹出框所需CSS： <style type="text/css"> #alertMsg { display: none; ... 阅读全文