摘要：我们知道抛物线的公式为: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, 488 阅读, 0 推荐, 收藏, 编辑
摘要：一直以来，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, 3840 阅读, 2 推荐, 收藏, 编辑
摘要：上次做的简单的拖拽：javascript简单拖拽练习(鼠标事件 mousedown mousemove mouseup)这次增加了一些相关的功能，增加四个角的拉伸改变宽度，主要还是用到一些简单的坐标位置计算，没有什么技术难度，熟练了一下自己对拖拽的运用不晓得为什么粘贴到博客园上就不支持IE6了，直接在本地是支持IE6的，有个问题就是，鼠标点击的时候光标会变为选择文字的光标，不知道应该怎么处理这个问题呢？DEMO如下：按此处拖动中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间 内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容 阅读全文
原生javascript淡入淡出焦点图 + Jquery实现方法
2012-05-13 10:19 by VVG, 4654 阅读, 11 推荐, 收藏, 编辑
摘要：淡入淡出焦点图效果类这里是缓动焦点图链接：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, 2830 阅读, 4 推荐, 收藏, 编辑
摘要：抽几天时间看了一下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, 5169 阅读, 6 推荐, 收藏, 编辑
摘要：前几日做了表单验证的控件，近日做了一些修改，增加了AJAX的简单验证，AJAX的提交，后台程序使用PHP+MYSQL，所以又对此文进行修改，表单验证部分基本没变，修改了以前的一个小BUG，对JS代码做了分离到一个JS的文件的处理。-----------------------------------------------------------------------------------------------------构造函数需要传递三个参数，一个是对应form的ID，另一个是options对象（包含匹配的正则表达式，和出错提示），最后一个是表单Ajax提交的URL,带URL的时候按 阅读全文
原创JS模拟Alert弹出框效果--自定义CSS样式
2012-04-26 11:35 by VVG, 46614 阅读, 7 推荐, 收藏, 编辑
摘要：由于系统默认alert弹出窗口不能自定义样式，有可能不符合网站的风格，虽然网上应该有很多这样的JS但是还是自己写的比较放心，顺便练习一下对DOM的操作支持IE6下的SELECT不能遮罩的问题，谷歌支持圆角，IE6下就比较丑了，四四方方的，不过可以自定义自己喜欢的样式听取建议后，修改了position:fixed, IE6下用hack处理了。点击看效果:点击模拟Alert弹出框点击模拟Alert弹出框点击模拟Alert弹出框所需CSS： <style type="text/css"> #alertMsg { display: none; ... 阅读全文
原创JS图片放大效果(二) — 多图点击切换，鼠标移上放大
2012-04-25 11:58 by VVG, 11439 阅读, 20 推荐, 收藏, 编辑
摘要：继javascript 简单的图片放大效果(一)之后，把这个效果完善了一下，支持多图轮流切换，如下：本次采用代码封装到一个对象的模式，和第一次函数式写法不一下，这样更清晰，添加自定义属性更方便，全部代码如下：大图的地址用自定义属性的方式显示在<img>标签如<li><img src="images/small.jpg" width="70" height="70" zoom="images/big.jpg"></li><!DOCTYPE html PUBLIC 阅读全文
javascript 简单的图片放大效果(一)
2012-04-07 18:21 by VVG, 2855 阅读, 3 推荐, 收藏, 编辑
摘要：图片放大实例 HTML源代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=u 阅读全文
javascript简单拖拽(鼠标事件 mousedown mousemove mouseup)
2012-04-02 17:48 by VVG, 26470 阅读, 0 推荐, 收藏, 编辑
摘要：javascript简单拖拽简单拖拽实现mousedown 的时候创建拖动对象，mouseup的时候释放对象，原理弄清楚了其实很简单。简单拖拽实现代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equi 阅读全文