摘要：
瀑布流已经火了一段时间了，自己最近研究了一下，网上关于瀑布流的帖子也很多，网上一般是说三种方式，固定列数的浮动布局，CSS3列布局，绝对定位布局推荐两个关于瀑布流的帖子，写得比我详细多了：迅雷的：http://cued.xunlei.com/log031张鑫旭的：网址太长点我这里主要是记录一下我的实现方式，用数组模拟的数据，也可以用AJAX实现读取数据，底部提供DEMO代码下载！一、固定列数的浮动布局 这种方式简单适用，先按照列数把布局固定好，然后在滚动事件中分别在每一列插入相应的数据既可，代码比较简单： 其实就一个滚动加载事件。我这里没有做按高低排序。 点击查看DEMO演示 代码如... 阅读全文
随笔分类 - 实例
javascript 打造城市选择控件，兼容IE6以及以上，谷歌，Firefox
2012-07-13 22:18 by VVG, 9981 阅读, 收藏, 编辑
摘要：
在淘宝旅行上看到的城市选择效果，感觉还不错，就自己的理解重新实现一遍，先看效果，然后再细说实现原理，支持鼠标上下键选择城市，支持直接输入城市名称，拼音首字母，全拼，支持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, 5595 阅读, 收藏, 编辑
摘要：
基本就是拖拽功能的应用，其它鼠标事件绑定，距离的计算，动画等，也有很多细节问题，需要亲自做了才知道，支持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 阅读全文
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... 阅读全文
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, 46686 阅读, 收藏, 编辑
摘要：
由于系统默认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, 11464 阅读, 收藏, 编辑
摘要：
继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, 2858 阅读, 收藏, 编辑
摘要：
图片放大实例 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, 26515 阅读, 收藏, 编辑
摘要：
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, 2966 阅读, 收藏, 编辑
摘要：
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 缓动焦点图实现的几种写法 封装 + 函数式 + JQuery
2012-03-28 11:58 by VVG, 2492 阅读, 收藏, 编辑
摘要：
焦点图原生JavaScript封装：调用方式：<script type="text/javascript"> vvg.slider.init('focus_pic'/**包裹图片的UL的ID**/, { v:1,//1表示垂直上下移动幻灯片 0表示左右移动幻灯片 height:180,//幻灯片高度 width:530,//幻灯片宽度 btnId:"fo... 阅读全文
Js操作表格-对表格单元格的添加删除修改
2012-01-05 15:02 by VVG, 4928 阅读, 收藏, 编辑
摘要：
动态表格动态表格彻底研究对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术 111122223333444455556665677777778888877999999999910101010<!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/199 阅读全文
Js选择框脚本 移动操作select 标签中的 option 项的操作事项
2011-12-31 15:04 by VVG, 2005 阅读, 收藏, 编辑
摘要：
题目：在窗体中有两个多选列表，用户可以从左侧列表中选择任意项，添加到右侧列表中。反之亦然。如下：在窗体中有两个多选列表，用户可以从左侧列表中选择任意项，添加到右侧列表中。反之亦然。此问题需用到选择框脚本的一些关键属性：add(newOption,relOption):向控件中插入新的<option>元素，其位置在置顶项（relOption)之前，不指定relOption就添加到最后；options:控件中所有<option>元素的集合；remove(index):移除给定位置的选项；selectedIndex:当前选择项的索引，没选时值为-1，多远时只保存选项中的第一个 阅读全文