摘要：
继javascript 简单的图片放大效果(一)之后，把这个效果完善了一下，支持多图轮流切换，如下：本次采用代码封装到一个对象的模式，和第一次函数式写法不一下，这样更清晰，添加自定义属性更方便，全部代码如下：大图的地址用自定义属性的方式显示在<img>标签如<li><img src="images/small.jpg" width="70" height="70" zoom="images/big.jpg"></li><!DOCTYPE html PUBLIC 阅读全文
随笔分类 - JS
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, 2964 阅读, 收藏, 编辑
摘要：
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... 阅读全文
JavaScript Tag标签切换实现的几种方法 原生js + jquery
2012-03-28 11:51 by VVG, 9120 阅读, 收藏, 编辑
摘要：
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/Javascript压缩工具taobao jsminifier[转]
2012-03-08 10:59 by VVG, 734 阅读, 收藏, 编辑
摘要：
Epile在网上找Javascript和CSS压缩软件的时候搜索到这款由淘宝在雅虎YUICompressed基础上开发的压缩工具，用起来还挺不错的。软件自带的安装说明说得不清楚，在这里Epile写了一个安装说明，并上传到Google Code分享给大家。本软件安装完毕可以直接在要压缩的文件点击右键使用，非常方便。安装说明下载jsMinifier安装Java SE Development Kit (JDK)打开“控制面板”，在其中打开“系统”，其下“高级”选项卡下的环境变量中的系统变量里添加变量名JAVA_HOME，变量值为Java SE Development Kit的安装目录，如“C:/Pr 阅读全文
利用Minify加速 优化网站性能教程
2012-03-08 10:42 by VVG, 1409 阅读, 收藏, 编辑
摘要：
Minify 是用PHP5开发的应用，通过遵循一些Yahoo的优化规则来提高网站的性能。它会合并多个CSS或者JavaScript文件，移除一些不必要的空格和注释，进行gzip压缩，并且会设置浏览器的缓存头。Minify 在设计上和Yahoo的 Combo Handler Service非常像，不过Minify可以合并任何你想要合并的JavaScript和CSS文件。一般情况下，网站速度的瓶颈都在前端，而最关键的就是资源的加载速度，但是大多数浏览器都有单个域名并发请求数限制，所以如果一个页面中存在很多的资源，比如CSS和JavaScript文件，那么明显会降低网站的加载速度，比较好处理方式就是 阅读全文
在服务端合并和压缩JavaScript和CSS文件[转]
2012-03-08 10:35 by VVG, 412 阅读, 收藏, 编辑
摘要：
Web性能优化最佳实践中最重要的一条是减少HTTP请求，它也是YSlow中比重最大的一条规则。减少HTTP请求的方案主要有合并JavaScript和CSS文件、CSS Sprites、图像映射（Image Map）和使用Data URI来编码图片。CSS Sprites和图像映射现在已经随处可见了，但由于IE6和IE7不支持Data URI以及性能问题，这项技术尚未大量使用。目前大部分网页中的JavaScript和CSS文件数量和开发时一致，少量的网页会根据实际情况采取本地合并，这些合并中相当多的是有选择地手动完成，每次新的合并都需要重新在本地完成并上传到服务器，比较的随意和繁琐，同样文件的压 阅读全文
使用ANT对Js/Css文件进行合并和压缩处理 [转]
2012-03-07 20:58 by VVG, 3272 阅读, 收藏, 编辑
摘要：
使用ANT对Js/Css文件进行合并和压缩处理Tag：javascript css ant减少HTTP请求是优化网站速度的一个重要手段, 所以对javascript/css两种文件进行压缩或合并都是非常必要的.这里介绍利用ANT来自动进行文件合并和压缩.3.1. javascript文件合并在开发阶段常常会把javascript文件分成几部分来写, 比如模块式的开发或多人合作, 或者使用一些外部库. 在生产环境下将比较小的文件合并成一个可以减少HTTP请求的次数, 从而达到优化的目的.这里假设你对ANT有一定了了解, 如果没有可以参考[ANT简单介绍].Example 1: 例子比如现在需要把 阅读全文
JavaScript实战游戏--贪吃蛇
2012-03-04 16:15 by VVG, 871 阅读, 收藏, 编辑
摘要：
步骤： 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 阅读全文
js正则函数match、exec、test、search、replace、split使用介绍集合
2012-02-27 21:16 by VVG, 331 阅读, 收藏, 编辑
摘要：
match 方法使用正则表达式模式对字符串执行查找，并将包含查找的结果作为数组返回。stringObj.match(rgExp)参数stringObj必选项。对其进行查找的 String 对象或字符串文字。rgExp必选项。为包含正则表达式模式和可用标志的正则表达式对象。也可以是包含正则表达式模式和可用标志的变量名或字符串文字。其余说明与exec一样，不同的是如果match的表达式匹配了全局标记g将出现所有匹配项，而不用循环，但所有匹配中不会包含子匹配项。例子1：function MatchDemo(){ var r, re; // 声明变量。 var s = "The rain.. 阅读全文
轻松解决PNG图片在IE6中背景不透明方法
2012-02-27 09:20 by VVG, 368 阅读, 收藏, 编辑
摘要：
最近在读javascript DOM高级程序设计，里面中有一个更好的代码，这种方式基本满足所有的PNG嵌入需求，代码如下：function fixMSIEPng() { if (!document.body.filters) { // Not MSIE return; } if (7 <= parseFloat(navigator.appVersion.split("MSIE")[1])) { // 7+ supports PNG return; } // Fix the inline images i... 阅读全文
关于正则表达式的简单引用
2012-01-10 09:57 by VVG, 375 阅读, 收藏, 编辑
摘要：
<!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 阅读全文
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，多远时只保存选项中的第一个 阅读全文