摘要：步骤： 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-03-01 16:26 by VVG, 307 阅读, 0 推荐, 收藏, 编辑
摘要：用过 Fireworks / PhotoShop 的人应该都知道，在画布中将一个页面模块居中是多容易的事，可如果是垂直居中，前端就苦逼了。因为 CSS 本身并没有提供相应的 API 支持（确切来说是提供不全）。今天重新整理一下思路，说说前端在实现页面元素垂直居中的几种思路：一、利用 position 和负边距利用绝对定位，让元素的顶部与居中线对齐，再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个可视化说明：/* 代码实现： * 设定宽度和高度，父节点为 position:relative; CSS是这样写的: */.selector { position:abso... 阅读全文
CSS3 border-image的使用方法
2012-02-29 15:48 by VVG, 518 阅读, 0 推荐, 收藏, 编辑
摘要：一、border-image的兼容性border-image可以说是CSS3中的一员大将，将来一定会大放光彩，其应用潜力真的是非常的惊人。可惜目前支持的浏览器有限，仅 Firefox3.5，chrome浏览器，Safari3+支持border-image。所以，就本文而言，IE浏览器可以回家休息 了，Firefox3及其以下以及Opera浏览器也可以休息去看《阿凡达》了。所以，本文提供的一些demo页面，要在 Firefox3.5+，chrome或Safari3+浏览器下才可以看到效果。二、熟悉border-image的一些特性我们可能对于CSS2中的background属性比较熟悉，例如：b 阅读全文
js正则函数match、exec、test、search、replace、split使用介绍集合
2012-02-27 21:16 by VVG, 331 阅读, 0 推荐, 收藏, 编辑
摘要：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 阅读, 0 推荐, 收藏, 编辑
摘要：最近在读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-02-23 21:49 by VVG, 420 阅读, 0 推荐, 收藏, 编辑
摘要：前端图片优化介绍随着前端页面越来越复杂，尤其是一些社区型的页面中，图片成了页面中不可或缺的资源，并且随着产品功能的叠加图片大小越来越多。以下是几个网站的图片所占的比重。由于图片是二进制文件，并不能像js、css、html那些源代码文件一样可以通过gzip压缩大大减小文件的大小。所以图片优化主要是选择合适的图片格式，在不降低图片质量的情况下去掉图片里的元数据信息。常用的一些优化方案目前图片优化使用比较多的主要是下面几种方式：选择合适的图片格式，如：png代替gif，尽量使用png8png使用pngout优化，jpg使用jpgtran通过yahoo的smush进行通过google的page spe 阅读全文
让你的网站融入HTML5的元素[转]
2012-02-22 10:05 by VVG, 280 阅读, 0 推荐, 收藏, 编辑
摘要：我们已经看过许多关于HTML 5的文章了，但是，对于Web开发人员来说，最主要需要知道的是：我现在可以用上HTML 5来做些什么，我怎么开始使用它?本文将带您了解如何在你的站点上使用HTML 5。 已经有许多文章是关于HTML 5的了，例如“HTML 5时代来临”和“HTML 5会如何改变网络”之类的，但是对于Web开发人员来说，最主要需要知道的是：我现在可以用上HTML 5来做些什么，我怎么开始使用它?好消息是现在已经有不少的HTML 5里的东西可以使用了。 但是，开始你就必须要明白一件事情，你需要知道你的受众如何，否则的话你就不该使用HTML 5。假如你的站点的访问大部分人都是在使... 阅读全文
DOCTYPE声明对JS获取窗口宽度和高度的影响【转】
2012-02-08 11:11 by VVG, 465 阅读, 0 推荐, 收藏, 编辑
摘要：【摘注】：以下说法不准确，不是有没有DOCTYPE声明，而是不同的DOCTYPE声明对js的处理有影响。在没有DOCTYPE声明的情况下:document.body.clientWidthdocument.body.clientHeight为当前窗口的宽度/高度;在DOCTYPE声明以后document.body.clientWidthdocument.body.clientHeight为整个页面的宽度/高度;document.documentElement.clientWidthdocument.documentElement.clientHeight为当前窗口的宽度/高度;同样增加DOCT 阅读全文
关于正则表达式的简单引用
2012-01-10 09:57 by VVG, 375 阅读, 0 推荐, 收藏, 编辑
摘要：<!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 阅读, 2 推荐, 收藏, 编辑
摘要：动态表格动态表格彻底研究对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术 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 阅读全文