摘要：
在淘宝旅行上看到的城市选择效果，感觉还不错，就自己的理解重新实现一遍，先看效果，然后再细说实现原理，支持鼠标上下键选择城市，支持直接输入城市名称，拼音首字母，全拼，支持IE6遮盖SELECT，压缩后12K，Demo如下：修正1：IE9的BUG我查了有点莫名其妙，但是去掉.cityBox这个CSS里面的box-shadow: 2px 2px 3px rgba(0,0,0,0.3);这段CSS，就可以了。最新的修改过的JS，在底部贴出来了，下载的那个没有更新，如果要用请直接在下面复制代码！Demo出发城市： 到达城市： 我实现的步骤：一、先用一定的格式罗列出控件所需要的城市以及拼音等，我这里是按照 阅读全文
随笔分类 - 原创
Javascript Lazyload延迟加载特效
2012-06-25 17:25 by VVG, 5803 阅读, 收藏, 编辑
摘要：
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, 18929 阅读, 收藏, 编辑
摘要：
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, 5541 阅读, 收藏, 编辑
摘要：
基本就是拖拽功能的应用，其它鼠标事件绑定，距离的计算，动画等，也有很多细节问题，需要亲自做了才知道，支持IE系列，FIREFOX，chrome浏览器,IE6下可能有点卡。过关卡的时候需要下载下一张图片，如果网速慢则会暂时停止一下，稍等一会就可以接着下一关。玩到最后一关就可以自定义图片拼图了,只需要输入图片的地址就可以了!如果需要直接自定义图片，则用谷歌浏览器或者FIREBUG把隐藏的Id 为imgDiy 的层显示出来就可以了.DEMO演示：点击试玩源代码下载：点击下载IFREAME演示:就不解释了，我源代码里面的注释写得很清楚，有兴趣的可以看一下源代码，如下：<!DOCTYPE html 阅读全文
缓动与二次函数 抛物线图练习
2012-05-28 21:57 by VVG, 1049 阅读, 收藏, 编辑
摘要：
我们知道抛物线的公式为: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 阅读全文
JS拖拽，移动与拉伸
2012-05-17 14:02 by VVG, 3840 阅读, 收藏, 编辑
摘要：
上次做的简单的拖拽：javascript简单拖拽练习(鼠标事件 mousedown mousemove mouseup)这次增加了一些相关的功能，增加四个角的拉伸改变宽度，主要还是用到一些简单的坐标位置计算，没有什么技术难度，熟练了一下自己对拖拽的运用不晓得为什么粘贴到博客园上就不支持IE6了，直接在本地是支持IE6的，有个问题就是，鼠标点击的时候光标会变为选择文字的光标，不知道应该怎么处理这个问题呢？DEMO如下：按此处拖动中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间 内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容中间内容 阅读全文
原生javascript淡入淡出焦点图 + Jquery实现方法
2012-05-13 10:19 by VVG, 4654 阅读, 收藏, 编辑
摘要：
淡入淡出焦点图效果类这里是缓动焦点图链接：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 阅读, 收藏, 编辑
摘要：
抽几天时间看了一下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 阅读, 收藏, 编辑
摘要：
前几日做了表单验证的控件，近日做了一些修改，增加了AJAX的简单验证，AJAX的提交，后台程序使用PHP+MYSQL，所以又对此文进行修改，表单验证部分基本没变，修改了以前的一个小BUG，对JS代码做了分离到一个JS的文件的处理。-----------------------------------------------------------------------------------------------------构造函数需要传递三个参数，一个是对应form的ID，另一个是options对象（包含匹配的正则表达式，和出错提示），最后一个是表单Ajax提交的URL,带URL的时候按 阅读全文
原创JS模拟Alert弹出框效果--自定义CSS样式
2012-04-26 11:35 by VVG, 46610 阅读, 收藏, 编辑
摘要：
由于系统默认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, 11437 阅读, 收藏, 编辑
摘要：
继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 阅读, 收藏, 编辑
摘要：
图片放大实例 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, 26468 阅读, 收藏, 编辑
摘要：
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 阅读全文
javaScript模拟select下拉菜单，满足自定义select样式的需求+jquery实现
2012-03-31 17:46 by VVG, 2914 阅读, 收藏, 编辑
摘要：
SELECT列表选择不支持样式设置，抽空用JS模拟了一个SELECT的样式，如下：下拉菜单样式模拟，模拟下拉菜单下拉菜单样式模拟，模拟下拉菜单代码如下：<!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 阅读全文
JavaScript Tag标签切换实现的几种方法 原生js + jquery
2012-03-28 11:51 by VVG, 9052 阅读, 收藏, 编辑
摘要：
Tab标签切换 效果图：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; chars 阅读全文
CSS布局：三栏布局，中间栏固定宽度，左右两边自适应
2012-03-27 14:31 by VVG, 1925 阅读, 收藏, 编辑
摘要：
被这样一个题目的布局难住了，回来思考了一下，只能想到JS控制，今天在群里面咨询了一下，@狄烁STEC提到一个很好的方法, 很好代码如下：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS</title><style type="text/css">body{padding:0;margin: 阅读全文
CSS布局技巧之多列同高方法
2012-03-27 11:11 by VVG, 2230 阅读, 收藏, 编辑
摘要：
CSS多列布局同高如下所示：CSS实现三列DIV等高布局这确实是个很简单的问题，也许你也已经相当熟悉，但很多人还不知道。下面介绍的技术是一个简捷的小技巧，它一定可以帮助你解决这个头痛的问题。三列DIV等高这确实是个很简单的问题，也许你也已经相当熟悉，但很多人还不知道问题，也许你也已经相当熟悉，但很多人还不知道问题，也许你也已经相当熟悉，但很多人还不知道问题，也许你也已经相当熟悉，但很多人还不知道。下面介绍的技术是一个简捷的小技还不知道问题，也许你也已经相当熟悉，但很多人还不知道。下面介绍的技术是一个简捷的小技还不知道问题，也许你也已经相当熟悉，但很多人还不知道。下面介绍的技术是一个简捷的小技还 阅读全文
css清除浮动各方法
2012-03-09 14:47 by VVG, 344 阅读, 收藏, 编辑
摘要：
（1）空标签法： 这种方法应该说是最简单的一种了，W3C建议在容器的末尾增加一个“clear:both"的元素，强迫容器适应它的高度以便装下所有的float，并没限制使用什么样的标签，有用<br style=”clear:both”/>的，有用空<div style=”clear:both”></div>的;比如：<div> <div style ="float:left; width:40%;"> <p> Some content </p></div> <p&g 阅读全文
JavaScript实战游戏--贪吃蛇
2012-03-04 16:15 by VVG, 866 阅读, 收藏, 编辑
摘要：
步骤： 1、DOM创建地图 2、创建蛇 3、创建食物 4、方向键控制蛇移动 5、蛇遇到食物，蛇身赠长，创建食物 6、游戏结束的两种方式：撞墙和撞到自身 点击此处游戏 点以下界面并按任意键开始游戏： 代码：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>贪吃蛇游戏</title></head><body onLoad 阅读全文
关于正则表达式的简单引用
2012-01-10 09:57 by VVG, 372 阅读, 收藏, 编辑
摘要：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb23 阅读全文