流水涵清——活力水世界

php抓取页面与代码解析

wxwdesign.cn(admin) — Mon, 19 Jul 2010 16:18:46 +0800

    在做一些天气预报或者RSS订阅的程序时，往往需要抓取非本地文件，一般情况下都是利用php模拟浏览器的访问，通过http请求访问url地址，然后得到html源代码或者xml数据，得到数据我们不能直接输出，往往需要对内容进行提取，然后再进行格式化，以更加友好的方式显现出来。

下面先简单说一下本文的主要内容：

一、 PHP抓取页面的主要方法：

1. file()函数    2. file_get_contents()函数  3. fopen()->fread()->fclose()模式  4.curl方式  5. fsockopen()函数 socket模式  6. 使用插件(如：http://sourceforge.net/projects/snoopy/)

二、PHP解析html或xml代码主要方式：

1. 正则表达式    2. PHP DOMDocument对象  3. 插件(如：PHP Simple HTML DOM Parser)

如果你对以上内容已经很了解，以下内容可以飘过......

PHP抓取页面

1. file()函数

程序代码

<?php
$url='http://t.qq.com';
$lines_array=file($url);
$lines_string=implode('',$lines_array);
echo htmlspecialchars($lines_string);
?>

2. file_get_contents()函数
使用file_get_contents和fopen必须空间开启allow_url_fopen。方法：编辑php.ini，设置 allow_url_fopen = On，allow_url_fopen关闭时fopen和file_get_contents都不能打开远程文件。

程序代码

<?php
$url='http://t.qq.com';
$lines_string=file_get_contents($url);
echo htmlspecialchars($lines_string);
?>

3. fopen()->fread()->fclose()模式

程序代码

<?php
$url='http://t.qq.com';
$handle=fopen($url,"rb");
$lines_string="";
do{
  $data=fread($handle,1024);
  if(strlen($data)==0){break;}
  $lines_string.=$data;
}while(true);
fclose($handle);
echo htmlspecialchars($lines_string);
?>

4. curl方式
使用curl必须空间开启curl。方法：windows下修改php.ini，将extension=php_curl.dll前面的分号去掉，而且需要拷贝ssleay32.dll和libeay32.dll到C:\WINDOWS\system32下；Linux下要安装curl扩展。

程序代码

<?php
$url='http://t.qq.com';
$ch=curl_init();
$timeout=5;
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
$lines_string=curl_exec($ch);
curl_close($ch);
echo htmlspecialchars($lines_string);
?>

5. fsockopen()函数 socket模式
socket模式能否正确执行，也跟服务器的设置有关系，具体可以通过phpinfo查看服务器开启了哪些通信协议，比如我的本地php socket没开启http，只能使用udp测试一下了。

 程序代码
<?php
$fp = fsockopen("udp://127.0.0.1", 13, $errno, $errstr);
if (!$fp) {
    echo "ERROR: $errno - $errstr<br />\n";
} else {
    fwrite($fp, "\n");
    echo fread($fp, 26);
    fclose($fp);
}
?>

6. 插件
网上应该有比较多的插件，snoopy插件是在网上搜到的，有兴趣的可以研究一下。

PHP解析xml(html)

1. 正则表达式：

程序代码

<?php
$url='http://t.qq.com';
$lines_string=file_get_contents($url);
eregi('<title>(.*)</title>',$lines_string,$title);
echo htmlspecialchars($title[0]);
?>

2. PHP DOMDocument()对象
如果远程的html或xml存在语法错误，php在解析dom的时候会报错。

程序代码

<?php
$url='http://www.136web.cn';
$html=new DOMDocument();
$html->loadHTMLFile($url);
$title=$html->getElementsByTagName('title');
echo $title->item(0)->nodeValue;
?>

3. 插件
本文以PHP Simple HTML DOM Parser为例，进行简单介绍，simple_html_dom的语法类似jQuery，它让php操作dom，就像使用jQuery操作dom一样的简单。

程序代码

<?php
$url='http://t.qq.com';
include_once('../simplehtmldom/simple_html_dom.php');
$html=file_get_html($url);
$title=$html->find('title');
echo $title[0]->plaintext;
?>

当然中国人是富有创造性的，老外往往会在技术上领先，但中国人往往会在使用上更胜一筹，往往做出一些让老外不敢想的功能，比如php的远程抓取与分析，本来是为数据的整合提供方便。但国人很喜欢这个，于是乎大量的采集站，它们本身不创造任何有价值的内容，就是靠抓取别人的网站内容，并把它据为己有。在百度里输入“php小”关键词，suggest列表第一个就是“php小偷程序”，然后把同样的关键词放入google，哥只能笑而不语。

canvas(html5)与svg

wxwdesign.cn(admin) — Tue, 22 Jun 2010 15:21:43 +0800

为了获得更好的效果，以下内容建议使用非IE浏览器查看。
canvas和svg一样，都可以在网页前端直接绘图，但其实canvas和svg是两种完全不同的东西。

SVG
SVG的全称是Scalable Vector Graphics(可缩放矢量图形)，它是用于描述二维矢量图形的一种图形格式，由W3C制定，是一个开放标准。
SVG是XML的一个子集，而canvas是html5里面的一个标签<canvas></canvas>，canvas是html5子集下面的一个元素，而svg是一个标准的集合。svg跟微软的vml是有点类似的，IE浏览器支持vml，不支持svg(不过IE可以通过安装插件来实现对svg的支持)；大部分非IE浏览器支持svg，不支持vml。支持html5的浏览器都支持canvas，它不分IE和非IE。

SVG实例代码：

程序代码

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     
     <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
     
     <rect x="100" y="60" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1; stroke:rgb(0,0,0);opacity:0.5"/>
     
     <ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2" opacity="0.5"/>
     
     <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:1"/>
     
     <polygon points="220,100 300,210 170,250" style="fill:#cccccc; stroke:#000000;stroke-width:1" />
     
     <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2"/>
     
     <path d="M250 150 L150 350 L350 350 Z" />
</svg>

查看示例：

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

canvas
canvas是html5新增的一个标签，它可以与JavaScript结合来实现图形的绘制和处理，而svg是通过元素标记实现的。

canvas示例：

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

html5与html4的比较

新增的标签：<article> <aside> <audio> <canvas> <command> <datalist> <details> <embed> <figcaption> <figure> <footer> <header> <hgroup> <keygen> <mark> <meter> <nav> <output> <progress> <rp> <rt> <ruby> <section> <source> <summary> <time> <video>

删除的标签：<acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <isindex> <noframes> <s> <strike> <tt> <u> <xmp>

当然目前出来的还只是html5的草案，由于浏览器的支持参差不齐，部分标签肯定还会在浏览器里保留，目前的浏览器注定是个混合体，已经删除的标签和新增标签会同时有效，混合在一起。

javascript颜色选择器(colorPicker)原理解析

wxwdesign.cn(admin) — Tue, 15 Jun 2010 22:46:37 +0800

去年jquery好像有了个ColorPicker的插件，当时感觉很震惊，这么多的颜色是怎么算出来的？借助于flash？或者有后端程序支持？后来下载了一个类似的插件，看了一下压缩包里的文件，只有html和js文件，既没有flash也没有后端程序文件，运行起来效果很好，经过一番考虑，明白了其实现原理，现简单介绍一下：

颜色选择器截图

RGB色条分析

R、G、B色光三原色，在展开的色条上，是有规律的。水平方向上，始终只有一个变量，另外两个是固定的。

写了简单的效果，用JavaScript实现RGB的色条：

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{ margin:0px auto;}
#color_bar{margin:10px; height:auto; overflow:hidden; width:306px; cursor:pointer;}
#color_bar span{ width:1px; height:20px; overflow:hidden; float:left;}
#dot{ border:#333333 1px solid; width:4px; height:4px; overflow:hidden; position:absolute; top:11px; left:11px;}
#show{ width:304px; height:304px; border:#000000 1px solid; clear:left; margin:10px; background-color:rgb(255,0,0); position:relative; overflow:hidden; cursor:pointer;}
#dot2{ position:absolute; right:0px; top:0px; width:17px; height:17px; cursor:pointer; background:url(dot.png);_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='dot.png', sizingMethod='crop');}
.cover1{ background:url(vertical_cover.png); width:304px; height:304px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='vertical_cover.png', sizingMethod='crop');}
.cover2{ background:url(horizontal_cover.png); width:304px; height:304px; cursor:pointer;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='horizontal_cover.png', sizingMethod='crop');}
#show2{ width:294px; height:30px; border:#000000 1px solid; margin:0px 10px; padding:5px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; background-color:#FF0000;}
.input{ width:294px; margin:10px; border:#000000 1px solid; font-size:14px; font-family:Verdana, Arial, Helvetica, sans-serif; padding:5px;}
.input input{ width:150px; height:16px; color:#333333; border:#999999 1px solid;}
.copyright{ width:294px; margin:10px; padding:5px; font-size:14px;}
</style>
<title>javascript_color_bar_demo</title>
</head>

<body>
<div id="color_bar"></div>
<div class="copyright">CopyRight: <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">流水涵清——前端开发</a></div>
<script type="text/javascript">
var color={
    R:255,  //set default Red
	G:0,    //set default Green
	B:0,    //set default Blue
	colorBar:document.getElementById('color_bar'), //get the dom element container
	elementFragment:document.createDocumentFragment(), //element fragment
	elementTemp:null,
	rend:function(){
	   this.elementTemp=document.createElement('span');
	   this.elementTemp.style.cssText='background-color:rgb('+this.R+','+this.G+','+this.B+')';
	   this.elementFragment.appendChild(this.elementTemp);
	},
	create:function(){
	  for(var i=0;i<255;i+=5){
	       this.G=i;
		   this.rend();
	     }
	  for(var i=255;i>0;i-=5){
	       this.R=i;
		   this.rend();
	     }
	  for(var i=0;i<255;i+=5){
	       this.B=i;
		   this.rend();
	     }
	  for(var i=255;i>0;i-=5){
	       this.G=i;
		   this.rend();
	     }
	  for(var i=0;i<255;i+=5){
	       this.R=i;
		   this.rend();
	     }
	  for(var i=255;i>0;i-=5){
	       this.B=i;
		   this.rend();
	     }
	  this.colorBar.appendChild(this.elementFragment);
	},
	init:function(){
	  this.create();
	}
}
color.init();
</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

主要JavaScript代码：

 程序代码

var color={
    R:255,  //set default Red
    G:0,    //set default Green
    B:0,    //set default Blue
    colorBar:document.getElementById('color_bar'), //get the dom element container
    elementFragment:document.createDocumentFragment(), //element fragment
    elementTemp:null,
    rend:function(){
       this.elementTemp=document.createElement('span');
       this.elementTemp.style.cssText='background-color:rgb('+this.R+','+this.G+','+this.B+')';
       this.elementFragment.appendChild(this.elementTemp);
    },
    create:function(){
      for(var i=0;i<255;i+=5){
           this.G=i;
           this.rend();
         }
      for(var i=255;i>0;i-=5){
           this.R=i;
           this.rend();
         }
      for(var i=0;i<255;i+=5){
           this.B=i;
           this.rend();
         }
      for(var i=255;i>0;i-=5){
           this.G=i;
           this.rend();
         }
      for(var i=0;i<255;i+=5){
           this.R=i;
           this.rend();
         }
      for(var i=255;i>0;i-=5){
           this.B=i;
           this.rend();
         }
      this.colorBar.appendChild(this.elementFragment);
    },
    init:function(){
      this.create();
    }
}
color.init();

进一步改进

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>/works/javascript/colorpicker/" />
<style type="text/css">
body{ margin:0px auto;}
#color_bar{margin:10px; height:auto; overflow:hidden; width:306px; cursor:pointer;}
#color_bar span{ width:1px; height:20px; overflow:hidden; float:left;}
#dot{ border:#333333 1px solid; width:4px; height:4px; overflow:hidden; position:absolute; top:11px; left:11px;}
#show{ width:304px; height:304px; border:#000000 1px solid; clear:left; margin:10px; background-color:rgb(255,0,0); position:relative; overflow:hidden; cursor:pointer;}
.cover1{ background:url(vertical_cover.png); width:304px; height:304px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='vertical_cover.png', sizingMethod='crop');}
.cover2{ background:url(horizontal_cover.png); width:304px; height:304px; cursor:pointer;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='horizontal_cover.png', sizingMethod='crop');}
#show2{ width:294px; height:30px; border:#000000 1px solid; margin:0px 10px; padding:5px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; background-color:#FF0000;}
.copyright{ width:294px; margin:10px; padding:5px; font-size:14px;}
</style>
<title>javascript_color_bar_demo</title>
</head>

<body>
<div id="color_bar"></div>
<div id="dot"></div>
<div id="show">
     <div class="cover2">
          <div class="cover1"></div>
     </div>
</div>
<div id="show2">R=255,G=0,B=0</div>
<div class="copyright">CopyRight: <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">流水涵清——前端开发</a></div>
<script type="text/javascript">
var color={
    R:255,  //set default Red
	G:0,    //set default Green
	B:0,    //set default Blue
	RS:[255,1,0,0,1,255],
	GS:[1,255,255,1,0,0],
	BS:[0,0,1,255,255,1],
	colorBar:document.getElementById('color_bar'), //get the dom element container
	elementFragment:document.createDocumentFragment(), //element fragment
	dot:document.getElementById('dot'),
	dot2:document.getElementById('dot2'),
	show:document.getElementById('show'),
	showRGB:document.getElementById('show2'),
	elementTemp:null,
	getMousePos:function(e){
	    e=e||window.event;
        if(e.pageX||e.pageY){return {x:e.pageX, y:e.pageY};}
        return {x:e.clientX + document.body.scrollLeft-document.body.clientLeft,y:e.clientY + document.body.scrollTop-document.body.clientTop}
	},
	rend:function(){
	   this.elementTemp=document.createElement('span');
	   this.elementTemp.style.cssText='background-color:rgb('+this.R+','+this.G+','+this.B+')';
	   this.elementFragment.appendChild(this.elementTemp);
	},
	create:function(){
	  for(var i=0;i<255;i+=5){
	       this.G=i;
		   this.rend();
	     }
	  for(var i=255;i>0;i-=5){
	       this.R=i;
		   this.rend();
	     }
	  for(var i=0;i<255;i+=5){
	       this.B=i;
		   this.rend();
	     }
	  for(var i=255;i>0;i-=5){
	       this.G=i;
		   this.rend();
	     }
	  for(var i=0;i<255;i+=5){
	       this.R=i;
		   this.rend();
	     }
	  for(var i=255;i>0;i-=5){
	       this.B=i;
		   this.rend();
	     }
	  this.colorBar.appendChild(this.elementFragment);
	  this.colorBar.onclick=function(e){
	      var pos=color.getMousePos(e);
		  pos.x-=10;
		  var n=Math.floor(pos.x/51);
		  var m=(pos.x%51)*5;
		  if(n%2==1){m=255-m;}
		  var r=color.RS[n],g=color.GS[n],b=color.BS[n];
		  if(r==1){r=m;}
		  if(g==1){g=m;}
		  if(b==1){b=m;}
		  color.dot.style.cssText='left:'+(pos.x+7)+'px;top:'+(pos.y-3)+'px;';
		  color.show.style.cssText='background-color:rgb('+r+','+g+','+b+')';
		  color.showRGB.style.cssText='background-color:rgb('+r+','+g+','+b+')';
		  color.showRGB.innerHTML='R='+r+', G='+g+', B='+b;
	  };
	},
	init:function(){
	  this.create();
	}
}
color.init();
</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

下面的颜色框，主要是用了两个PNG的渐变图片，叠加在一起而成的效果。

完善的一点效果，本文仅仅限于解析一下原理，如果有兴趣，可以自己研究一下，相信你也很容易就做出来一个自己的颜色选择器

RGB与HEX之间的转换：

HTML代码

<body>
<h3>RGB与HEX转换</h3>
<label>请输入：</label><input type="text" value="#A52829" />
<a href="javascript:void(0)">转换成GRB</a> | <a href="javascript:void(0)">转换成HEX</a>
<script type="text/javascript">
var convert={
    input:document.getElementsByTagName('input')[0],
	a:document.getElementsByTagName('a'),
	h3:document.getElementsByTagName('h3')[0],
	rgbToHex:function(rgb){
	   var hex=Number(rgb).toString(16).toUpperCase();
	   return hex.length>1?hex:'0'+hex;
	},
	hexToRgb:function(hex){
	   return parseInt(hex,16);
	},
	init:function(){
	  var that=this;
	  this.a[0].onclick=function(){
	       var value=that.input.value;
		   var pattern=/^#[0-9A-Fa-f]{6}$/;
		   if(!pattern.test(value)){alert('输入不正确！');return false;}
	       that.input.value=that.hexToRgb(value.substring(1,3))+','+that.hexToRgb(value.substring(3,5))+','+that.hexToRgb(value.substring(5));
	  };
	  this.a[1].onclick=function(){
	       var value=that.input.value.split(',');
		   var pattern=/^(2[0-5][0-5]|[0-1]?[0-9]?[0-9]),(2[0-5][0-5]|[0-1]?[0-9]?[0-9]),(2[0-5][0-5]|[0-1]?[0-9]?[0-9])$/;
		   if(!pattern.test(value)){alert('输入不正确！');return false;}
	       that.input.value='#'+that.rgbToHex(value[0])+that.rgbToHex(value[1])+that.rgbToHex(value[2]);
	  };
	  this.input.onchange=function(){
	      var value=that.input.value;
	      var pattern=/^(2[0-5][0-5]|[0-1]?[0-9]?[0-9]),(2[0-5][0-5]|[0-1]?[0-9]?[0-9]),(2[0-5][0-5]|[0-1]?[0-9]?[0-9])$/;
		  if(pattern.test(value)){
		    that.h3.style.cssText='background-color:rgb('+value+')';
		  }
		  var pattern2=/^#[0-9A-Fa-f]{6}$/;
		  if(pattern2.test(value)){
		    that.h3.style.cssText='background-color:'+value;
		  }
	  };
	}
};
convert.init();
</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

javascript仿Google suggest效果

wxwdesign.cn(admin) — Sat, 12 Jun 2010 16:52:42 +0800

既前面的聊天，又做了个模拟Google suggest的效果，利用后台php取得百度suggest关键词，然后用Google搜索它，本来打算做个twitter搜索的效果，但由于Google的动态更新，里面内容尺度比较大，所以还是没选择它，下面是图片预览效果：

查看效果

PHP+Ajax在线聊天

wxwdesign.cn(admin) — Wed, 09 Jun 2010 02:54:01 +0800

      最近两天搞了这个小玩意，其实嘛，也没太多新意，原来这种程序见多了，上网看了一圈，搜出来很多，不过大部分都是相互转载来转载去的。

      去年因为Omegle的走红，还有gmail的web聊天功能，让网页聊天似乎活力重现，激情四射，于是乎QQ也推出了在线聊天，SNS社区也相继出现了网页聊天功能，国内还有不少人模仿Omegle网站，比如“路过的”、“陌路人”等网站，因为Ajax的兴盛，Web前端似乎进入了一个新的春天。

      以前想写个聊天的东西，一直为mysql数据库犯愁，目前手头上没有空闲的数据库可用，网上找了一个国外的，速度有点慢，而且不能外部访问数据库，只能做个json跨域了。由于是免费的，不是很稳定，如果你发现自己掉线了，刷新一下网页就可以了，目前还是走的短连接路线，关闭网页10秒后自动下线。查看效果

没考虑设计，只做了功能，界面凑合用:-)

     为了保险，如果上面一个不能用了，或者很慢，可以试一下下面这个，由于这个数据库有点小问题，对于内存表支持很差，所以不方便统计在线人数，就去掉了在线人数的功能。查看效果

另外使用其它在线聊天，如果聊天窗口不是当前窗口，有新消息的时候，会在标题栏进行提示，主要用到window.onfocus和window.onblur，经测试IE对这两个事件的判断与其它浏览器有较大差别，如果要在IE下使用，需要进一步处理。示例效果：

HTML代码

<body>
<div class="content"></div>
<div class="copyright">Blog: <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">前端开发</a></div>
<script type="text/javascript">
var check_current={
    c:document.getElementsByTagName('div')[0],
	active:function(){
	   check_current.c.innerHTML+='<span class="green">This page is active!<br /></span>';
	},
	unactive:function(){
	   check_current.c.innerHTML+='<span class="red">This page is unactive!<br /></span>';
	},
	init:function(){
	   window.onfocus=this.active;
	   window.onblur=this.unactive;
	}
}
check_current.init();
</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

在压缩的过程中发现了一点小陷阱，代码如下：

 程序代码
window.onfocus=this.active     //你可能会发现这里少了个分号
window.onblur=this.unactive;

如果是这样写呢？

 程序代码

window.onfocus=function(){chat.isCurrentActive=1;}  //其实这里也少了个分号，但是你看不出来的，如果一进行js压缩，就会出错
window.onblur=function(){chat.isCurrentActive=0;}

-----------------2010-06-14 update-----------------
1. 增加了一点声音的功能，如果有新消息，会有声音提示。

2. 非IE浏览器下，如果有新消息，标题闪动。

PHP_MYSQL的点滴注意事项

wxwdesign.cn(admin) — Sat, 05 Jun 2010 01:03:58 +0800

1. 外键约束

外键约束只对InnoDB类型的数据表有效，其它类型会忽略这个功能，恰好我在一本书上看到了MyISAM类型的表，却使用了外键约束，自己试了一下，怎么就是约束不住，又查不出问题，最后才发现越来是数据类型问题，不知道是老外写的疏忽，还是翻译者给弄错了。

2. mysql数据库打开以后，不要忘了关闭

数据查询结束，如果页面也已经读取完毕，暂时不需要再次查询数据库，最好关闭掉连接。mysql_close(id);

利用Ajax实现长连接(模拟推送)

wxwdesign.cn(admin) — Thu, 03 Jun 2010 15:56:58 +0800

      很多程序都可以通过socket来实现长连接，实现消息的即时推送。但由于http请求一般都是短连接，一次请求结束，就会断开与服务器的连接，服务器不能主动推送数据到客户端，而只能由客户端发起请求，但有些时候，需要在web上实现即时的消息传输，比如即时聊天、股票动态信息等。
    在Ajax技术被发掘以前，在网页上实现无刷新的即时聊天，似乎是很困难的事情，但由于Ajax技术的兴起，人们可以进一步来挖掘它的潜力了，象gmail、google gtalk的网页版，都是Ajax长连接的重要应用，目前很多网站可能都已经在使用长连接技术了，比如SNS网站的即时聊天。

1.Ajax短连接方式实现网页聊天

自己画了一个模型图：

     常规的短连接模式下，都是通过不间断刷新请求实现的，比如每间隔3秒发送一次Ajax请求，3秒更新一下数据，然后就这样不间断刷新下去，直到用户关闭网页。这样所带来的弊端就是，如果用户很长时间都没有操作，每次刷新都不会返回新数据，这样就造成了资源的浪费，很多请求都是没必要的；另外一个问题，就是用户的输入，跟数据的请求不是同步的，会造成一定的信息延迟。

2.Ajax长连接方式实现网页聊天

模型图：

      Ajax长连接模式，它的刷新是根据数据来执行的，如果有新数据返回，接收并解析显示数据，然后发起新的Ajax请求，如果一段时间内，用户没有操作，则连接处于睡眠状态，一直等待有用户输入或者请求超时，然后发起下个Ajax请求。这样做的好处是，每个消息都会即时推送到客户端，延迟极少；另外每次请求都是有意义的，与短连接对比，效率要高很多。但对于一个用户量很多，并且操作非常频繁的网站，长连接模式也会出现过于频繁的刷新问题。目前IE对于HTTP连接数是有限制的，每个网页只能同时进行两个长连接，第三个长连接会被阻塞。

利用php在后台sleep，自己做了个模拟的程序，查看效果

      看了一下别人写的Ajax长连接聊天的案例，以php为例，基本上是在后台进行不间断的检测，如果有新数据就推送，如果没有新数据，就一直阻塞，直到30秒超时，然后客户端重新发起下一个请求。后台判断里重要的一行代码：usleep(10000); 就是暂停10毫秒，缓解一下CPU压力，个人感觉如果暂停100毫秒，时间延迟也是很难感觉到的。这种方法基本就是把前端的循环，搬到了后台，中间减少了网络传输的环节，如果是一个Ajax的即时聊天系统，要保存用户的聊天记录，那就需要跟数据库相结合，每秒10次以上的数据查询，这个与短连接比，必定加大了数据库的压力，具体怎么优化，这个应该是交给服务器端人员来处理了。

如果想要了解更多的内容请Google一下comet，或者看看这里(一个很不错的框架，Ajax Push Engine)，这个网站有很多demo，效果很帅。

测试一下你的生活压力

wxwdesign.cn(admin) — Sat, 15 May 2010 15:53:59 +0800

在微博里看到的一张图片，很不错，分享一下，测试你的心理压力有多大。下面是一张静止的Jpeg图片，心理压力越大，看到图片里波浪运动的越快，如果你心灵处于没任何压力的状态，你将看到的是一张静止的图片。

如果你看到波浪运动的很快，那么请你停止目前所想的事情，闭上眼睛，深呼吸几次，然后再心平气和的来看这幅图片，波浪是不是慢了很多呢:-)

今天有网友给我发邮件了，提出了不同的见解，在此做一个更正，这是一个视错觉的图片，而非心里压力测试图片，原文可以参考这里：http://xirang.ca/2009/12/rotating-snake-visual-illusion

cssText与reflow

wxwdesign.cn(admin) — Fri, 07 May 2010 17:08:13 +0800

一般情况下使用JavaScript控制CSS样式的时候，都习惯性一行一行地写，习惯性忽略了效率问题。今天群里有人提起了cssText，测试了一下，原来这个属性是IE only的，不过很多浏览器也都默认了这个属性，在FF和chrome下页能很好的实现。关于reflow这里还有一篇不错的文章：http://varnow.org/?p=232

示例代码：

 程序代码
<div></div>
<script type="text/javascript">
document.getElementsByTagName("div")[0].style.cssText="width:100px; height:200px; border:#ff0000 1px solid;";
</script>

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

测试示例2

HTML代码

<body>
<div>在后面跟随http://www.google.com.hk/intl/zh-CN/images/toolbar_animation_20090618.png</a>" width="268" height="262" alt="logo" /></div>
<h2>cssText测试</h2>
<ul>
   <li>L1</li>
   <li>L2</li>
   <li>L3</li>
</ul>
<ul>
   <li>L1</li>
   <li>L2</li>
   <li>L3</li>
</ul>
<p>在前面带路http://www.google.com.hk/intl/zh-CN/images/toolbar_animation_20090618.png</a>" width="268" height="262" alt="logo" /></p>
<script type="text/javascript">
var d=document.getElementsByTagName("div")[0];
var p=document.getElementsByTagName("p")[0];
var pos=null;
function getMousePosition(e){
    var posx=0,posy=0;
    if(!e){var e=window.event;}
    if(e.pageX||e.pageY){posx=e.pageX;posy=e.pageY;}
    else if(e.clientX||e.clientY){
       posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
       posy = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
    }
    return{'x':posx,'y':posy};
}

function run1(){
      p.style.left=pos.x-70+"px";
	  p.style.top=pos.y-70+"px";	  
}

function run2(){
      d.style.cssText="left:"+(pos.x+20)+"px; top:"+(pos.y+20)+"px;";
}
document.onmousemove=function(e){
      pos=getMousePosition(e);
	  run2();
	  run1();
}
</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

JavaScript菜单循序渐进

wxwdesign.cn(admin) — Mon, 03 May 2010 22:48:02 +0800

说起菜单不同的人可能有不同感受，有的人感觉这个很有趣，做菜单是一件很好玩的事；也有的人会对它不屑一顾，认为这些都是雕虫小技；还有一部分人会认为，这个完全没必要仔细看，一切都可以拿来主义，网上一搜一大把，焉用亲自去写？

本文并不是什么很高深的见解或者观点独到，只是想从一些示例来寻找菜单制作的思路，掌握了思想就可以融会变通，想要什么样的菜单，只要想出来，就可以尝试去实现你的创意。

有人一看，说你用JavaScript做菜单，这个太不友好了，现在纯CSS的菜单到处都是。的确如此，我blog里也有很多纯CSS菜单的demo，但纯CSS做出来的菜单毕竟效果很有限，有些创意但靠CSS可能无法实现，用JavaScript写菜单也是一种尝试，可以实现很炫的效果（网上JavaScript模仿flash的效果很多）。

但由于JavaScript里事件具有冒泡的特性，在处理菜单的时候，往往被冒泡搞的很头疼，特别是给菜单加上动画特效之后，更是让很多人郁闷，有人可能会用timer或者坐标判断来解决这个问题，但其实都不理想，网上还有老外写的一个jQuery插件，专门用于解决这个问题，可以说JavaScript做菜单并不是一件小事。

好了，闲话少说，开始第一步，做一个简单的下拉菜单：

用到的HTML代码：

 程序代码

<ul id="nav">
  <li>
     <a href="#">江苏省</a>
     <div class="child_menu">
          <a href="#">南京</a>
          <a href="#">苏州</a>
          <a href="#">无锡</a>
          <a href="#">常州</a>
          <a href="#">镇江</a>
          <a href="#">徐州</a>
     </div>
  </li>
  <li>
     <a href="#">浙江省</a>
     <div class="child_menu">
          <a href="#">杭州</a>
          <a href="#">宁波</a>
     </div>
  </li>
  <li>
     <a href="#">福建省</a>
     <div class="child_menu">
          <a href="#">厦门</a>
          <a href="#">福州</a>
          <a href="#">泉州</a>
     </div>
  </li>
  <li>
     <a href="#">广东省</a>
     <div class="child_menu">
          <a href="#">广州</a>
          <a href="#">深圳</a>
          <a href="#">东莞</a>
          <a href="#">潮州</a>
     </div>
  </li>
  <li>
     <a href="#">山东省</a>
     <div class="child_menu">
          <a href="#">青岛</a>
          <a href="#">威海</a>
          <a href="#">泰安</a>
          <a href="#">济南</a>
          <a href="#">德州</a>
     </div>
  </li>
</ul>

CSS样式代码：

 程序代码

#nav{ width:500px; margin:0px auto; list-style:none; font-size:12px; text-align:center; line-height:26px;}
#nav li{ width:100px; float:left;}
#nav li a{ display:block; width:99px; border-bottom:#FFFFFF 1px solid; text-decoration:none; background:#333333; height:26px; color:#CCCCCC;}
#nav li a:hover{ background:#CCCCCC; color:#333333;}
#nav li div{ display:none;}

后面的JavaScript代码都是引用上面的HTML和样式，示例使用了JQuery，如果要查看效果，运行后需要刷新一下页面。

基本菜单效果的实现：

 程序代码
<script type="text/javascript">
var nav_main=$("#nav>li>a");
var nav_child=$("#nav>li>div");
nav_main.each(function(i){
   $(this).mouseover(function(){
               basic.show(i);
               })
          .mouseout(function(){
               basic.hidden(i);
               });
});
nav_child.each(function(i){
   $(this).mouseover(function(){
               basic.show(i);
               })
          .mouseout(function(){
               basic.hidden(i);
               });
});

var basic={
   show:function(i){nav_child.eq(i).show();},
   hidden:function(i){nav_child.eq(i).hide();}
}
</script>

查看效果：

HTML代码

<body>
<ul id="nav">
  <li>
     <a href="#">江苏省</a>
     <div class="child_menu">
          <a href="#">南京</a>
          <a href="#">苏州</a>
          <a href="#">无锡</a>
          <a href="#">常州</a>
          <a href="#">镇江</a>
          <a href="#">徐州</a>
     </div>
  </li>
  <li>
     <a href="#">浙江省</a>
     <div class="child_menu">
          <a href="#">杭州</a>
          <a href="#">宁波</a>
     </div>
  </li>
  <li>
     <a href="#">福建省</a>
     <div class="child_menu">
          <a href="#">厦门</a>
          <a href="#">福州</a>
          <a href="#">泉州</a>
     </div>
  </li>
  <li>
     <a href="#">广东省</a>
     <div class="child_menu">
          <a href="#">广州</a>
          <a href="#">深圳</a>
          <a href="#">东莞</a>
          <a href="#">潮州</a>
     </div>
  </li>
  <li>
     <a href="#">山东省</a>
     <div class="child_menu">
          <a href="#">青岛</a>
          <a href="#">威海</a>
          <a href="#">泰安</a>
          <a href="#">济南</a>
          <a href="#">德州</a>
     </div>
  </li>
</ul>
<script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" target="_blank" rel="external">http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js</a>"></script>
<script type="text/javascript">
var nav_main=$("#nav>li>a");
var nav_child=$("#nav>li>div");
nav_main.each(function(i){
   $(this).mouseover(function(){
               basic.show(i);
			   })
	      .mouseout(function(){
		       basic.hidden(i);
			   });
});
nav_child.each(function(i){
   $(this).mouseover(function(){
               basic.show(i);
			   })
	      .mouseout(function(){
		       basic.hidden(i);
			   });
});

var basic={
   show:function(i){nav_child.eq(i).show();},
   hidden:function(i){nav_child.eq(i).hide();}
}
</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

2. 增加一个小效果，菜单弹出的动画效果

 程序代码

var senior={
   show:function(i){
       nav_child.eq(i).show("fast");
   },
   hidden:function(i){
       nav_child.eq(i).stop(true,true);
       nav_child.eq(i).hide();
   }
}

查看示例：

HTML代码

<body>
<ul id="nav">
  <li>
     <a href="#">江苏省</a>
     <div class="child_menu">
          <a href="#">南京</a>
          <a href="#">苏州</a>
          <a href="#">无锡</a>
          <a href="#">常州</a>
          <a href="#">镇江</a>
          <a href="#">徐州</a>
     </div>
  </li>
  <li>
     <a href="#">浙江省</a>
     <div class="child_menu">
          <a href="#">杭州</a>
          <a href="#">宁波</a>
     </div>
  </li>
  <li>
     <a href="#">福建省</a>
     <div class="child_menu">
          <a href="#">厦门</a>
          <a href="#">福州</a>
          <a href="#">泉州</a>
     </div>
  </li>
  <li>
     <a href="#">广东省</a>
     <div class="child_menu">
          <a href="#">广州</a>
          <a href="#">深圳</a>
          <a href="#">东莞</a>
          <a href="#">潮州</a>
     </div>
  </li>
  <li>
     <a href="#">山东省</a>
     <div class="child_menu">
          <a href="#">青岛</a>
          <a href="#">威海</a>
          <a href="#">泰安</a>
          <a href="#">济南</a>
          <a href="#">德州</a>
     </div>
  </li>
</ul>
<script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" target="_blank" rel="external">http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js</a>"></script>
<script type="text/javascript">
var nav_main=$("#nav>li>a");
var nav_child=$("#nav>li>div");
nav_main.each(function(i){
   $(this).mouseover(function(){
               senior.show(i);
			   })
	      .mouseout(function(){
		       senior.hidden(i);
			   });
});
nav_child.each(function(i){
   $(this).mouseover(function(){
               basic.show(i);
			   })
	      .mouseout(function(){
		       basic.hidden(i);
			   });
});

var basic={
   show:function(i){nav_child.eq(i).show();},
   hidden:function(i){nav_child.eq(i).hide();}
}

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

3. 让菜单收缩也实现动画效果

 程序代码

var senior={
   show:function(i){
       nav_child.eq(i).show("fast");
   },
   hidden:function(i){
       nav_child.eq(i).stop(true,true);
       nav_child.eq(i).hide("fast");
   }
}

查看示例：

HTML代码

<body>
<ul id="nav">
  <li>
     <a href="#">江苏省</a>
     <div class="child_menu">
          <a href="#">南京</a>
          <a href="#">苏州</a>
          <a href="#">无锡</a>
          <a href="#">常州</a>
          <a href="#">镇江</a>
          <a href="#">徐州</a>
     </div>
  </li>
  <li>
     <a href="#">浙江省</a>
     <div class="child_menu">
          <a href="#">杭州</a>
          <a href="#">宁波</a>
     </div>
  </li>
  <li>
     <a href="#">福建省</a>
     <div class="child_menu">
          <a href="#">厦门</a>
          <a href="#">福州</a>
          <a href="#">泉州</a>
     </div>
  </li>
  <li>
     <a href="#">广东省</a>
     <div class="child_menu">
          <a href="#">广州</a>
          <a href="#">深圳</a>
          <a href="#">东莞</a>
          <a href="#">潮州</a>
     </div>
  </li>
  <li>
     <a href="#">山东省</a>
     <div class="child_menu">
          <a href="#">青岛</a>
          <a href="#">威海</a>
          <a href="#">泰安</a>
          <a href="#">济南</a>
          <a href="#">德州</a>
     </div>
  </li>
</ul>
<script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" target="_blank" rel="external">http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js</a>"></script>
<script type="text/javascript">
var nav_main=$("#nav>li>a");
var nav_child=$("#nav>li>div");
nav_main.each(function(i){
   $(this).mouseover(function(){
               senior.show(i);
			   })
	      .mouseout(function(){
		       senior.hidden(i);
			   });
});
nav_child.each(function(i){
   $(this).mouseover(function(){
               basic.show(i);
			   })
	      .mouseout(function(){
		       basic.hidden(i);
			   });
});

var basic={
   show:function(i){nav_child.eq(i).stop(true,true);nav_child.eq(i).show();},
   hidden:function(i){nav_child.eq(i).hide();}
}

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

上面的效果看起来似乎还不够完美，应该让鼠标从子菜单上移走时，也是动画收回效果。

4. 进一步完善菜单的动画效果

运行查看效果：

HTML代码

<body>
<ul id="nav">
  <li>
     <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">江苏省</a>
     <div class="child_menu">
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">南京</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">苏州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">无锡</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">常州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">镇江</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">徐州</a>
     </div>
  </li>
  <li>
     <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">浙江省</a>
     <div class="child_menu">
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">杭州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">宁波</a>
     </div>
  </li>
  <li>
     <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">福建省</a>
     <div class="child_menu">
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">厦门</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">福州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">泉州</a>
     </div>
  </li>
  <li>
     <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">广东省</a>
     <div class="child_menu">
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">广州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">深圳</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">东莞</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">潮州</a>
     </div>
  </li>
  <li>
     <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">山东省</a>
     <div class="child_menu">
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">青岛</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">威海</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">泰安</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">济南</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">德州</a>
     </div>
  </li>
</ul>
<script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" target="_blank" rel="external">http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js</a>"></script>
<script type="text/javascript">
var nav_main=$("#nav>li>a");
var nav_child=$("#nav>li>div");
nav_main.each(function(i){
   $(this).mouseover(function(){
               senior.show(i);
			   })
	      .mouseout(function(){
		       senior.hidden(i);
			   });
});
nav_child.each(function(i){
   $(this).mouseover(function(){
               basic.show(i);
			   })
	      .mouseout(function(){
		       senior.hidden(i);
			   });
});

var basic={
   show:function(i){nav_child.eq(i).stop(true,true);nav_child.eq(i).show();},
   hidden:function(i){nav_child.eq(i).hide();}
}

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

似乎还不够好，show和hidden函数写了两遍，分别在basic和senior对象里，能不能合成一个呢？

5. 再次进行改进，利用windows事件消除冒泡造成的菜单闪烁问题。

对senior对象进行改进：

 程序代码
var senior={
   getEvent:function(){
         if(window.event){
               return this.formatEvent(window.event);
          }else{
               return this.getEvent.caller.arguments[0];  
          }
   },
   formatEvent:function(e){ 
        if(e.type=="mouseout"){
           e.relatedTarget=e.toElement;    
        }else if(e.type=="mouseover"){
           e.relatedTarget=e.fromElement;    
        }        
        e.stopPropagation=function(){this.cancelBubble=true;};        
        e.target=e.srcElement;
        return e;
   },
   show:function(e,i){
       nav_child.eq(i).stop(true,true);
       var oEvent=this.getEvent();
       if(oEvent.relatedTarget.tagName!='A'||$.inArray(oEvent.relatedTarget,nav_main)>-1){
       nav_child.eq(i).show("fast");
       }
   },
   hidden:function(e,i){       
       nav_child.eq(i).stop(true,true);
       var oEvent=this.getEvent();
       if(oEvent.relatedTarget.tagName!='A'||$.inArray(oEvent.relatedTarget,nav_main)>-1){
       nav_child.eq(i).hide("fast");
       }
   }
}

查看示例效果：

HTML代码

nav_main.each(function(i){
   $(this).mouseover(function(e){
               senior.show(e,i);
			   })
	      .mouseout(function(e){
		       senior.hidden(e,i);
			   });
});
nav_child.each(function(i){
   $(this).mouseover(function(e){
               senior.show(e,i);
			   })
	      .mouseout(function(e){
		       senior.hidden(e,i);
			   });
});

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

有了上面的模式之后，就可以很容易变换出其它的动画效果，比如把show换成slideDown，动画就变成了手风琴的效果，如下：

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

只需要稍微修改一下CSS，就变成了横向菜单

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

多行菜单

HTML代码

p{ width:500px; margin:0px auto; font-size:14px; text-align:center; padding:10px 0px;}
</style>
<title>菜单测试——<a href="http://wxwdesign.cn" target="_blank" rel="external">http://wxwdesign.cn</a></title>
</head>

<body>

<ul id="nav">
  <li>
     <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">江苏省</a>
     <div class="child_menu">
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">南京</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">苏州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">无锡</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">常州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">镇江</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">南通</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">扬州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">盐城</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">淮安</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">连云港</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">徐州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">泰州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">宿迁</a>
     </div>
  </li>
  <li>
     <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">浙江省</a>
     <div class="child_menu">
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">杭州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">宁波</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">温州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">绍兴</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">嘉兴</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">湖州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">金华</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">衢州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">舟山</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">台州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">丽水</a>
     </div>
  </li>
  <li>
     <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">福建省</a>
     <div class="child_menu">
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">厦门</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">福州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">泉州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">漳州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">宁德</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">莆田</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">龙岩</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">三明</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">南平</a>
     </div>
  </li>
  <li>
     <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">广东省</a>
     <div class="child_menu">
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">广州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">深圳</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">珠海</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">东莞</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">潮州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">汕头</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">韶关</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">佛山</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">江门</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">湛江</a>          
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">茂名</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">肇庆</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">惠州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">梅州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">汕尾</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">河源</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">阳江</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">清远</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">中山</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">揭阳</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">云浮</a>
     </div>
  </li>
  <li>
     <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">山东省</a>
     <div class="child_menu">
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">青岛</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">威海</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">泰安</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">济南</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">德州</a>          
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">淄博</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">枣庄</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">东营</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">烟台</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">潍坊</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">济宁</a>          
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">日照</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">莱芜</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">临沂</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">聊城</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">滨州</a>          
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">菏泽</a>
     </div>
  </li>
</ul>
<script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" target="_blank" rel="external">http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js</a>"></script>
<script type="text/javascript">
var nav_main=$("#nav>li>a");
var nav_child=$("#nav>li>div");
var show=$("#show");

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

更精简的版本

上周交流会我提出了这个问题，虽然大家各种观点都有，但最后还是得到一点更好的思路，那就是hover，用可以省去很多的麻烦，思路也变得更简单。

示例效果：

HTML代码

nav_main.each(function(i){$(this).hover(
   function(){
      nav_child.eq(i).slideDown(); //show
   },
   function(){
      nav_child.eq(i).slideUp();  //hidden
   });
});
</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

hover的魅力惊人

有了这个思路，灵活度就大了很多。

HTML代码

p{font-size:12px; padding:10px; background:#999999; text-align:left; margin:0px;}
p img{float:left; margin-right:10px;}
table{ border:#666666 1px solid; background:#333333; width:100%;}
table td{ background:#FFFFFF;}
</style>
<title>菜单测试——<a href="http://wxwdesign.cn" target="_blank" rel="external">http://wxwdesign.cn</a></title>
</head>

Fujian Province</td></tr>
<tr><td class="cardFirstTd">下辖地区：</td>
<td class="cardSecondTd">
福州市等</td></tr>
<tr><td class="cardFirstTd">地理位置：</td>
<td class="cardSecondTd">
中国东南部</td></tr>
<tr><td class="cardFirstTd">人口：</td>
<td class="cardSecondTd">
2009年2月27日，3607万人。</td></tr>

<tr><td class="cardFirstTd">气候条件：</td>
<td class="cardSecondTd">
属亚热带海洋性季风气候</td></tr>
<tr><td class="cardFirstTd">著名景点：</td>
<td class="cardSecondTd">
武夷山风景名胜区等</td></tr>
</table>
     </div>
  </li>
  <li>
     <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">广东省</a>
     <div class="child_menu">
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">广州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">深圳</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">珠海</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">东莞</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">潮州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">汕头</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">韶关</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">佛山</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">江门</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">湛江</a>          
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">茂名</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">肇庆</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">惠州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">梅州</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">汕尾</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">河源</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">阳江</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">清远</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">中山</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">揭阳</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">云浮</a>
     </div>
  </li>
  <li>
     <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">山东省</a>
     <div class="child_menu">
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">青岛</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">威海</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">泰安</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">济南</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">德州</a>          
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">淄博</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">枣庄</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">东营</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">烟台</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">潍坊</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">济宁</a>          
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">日照</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">莱芜</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">临沂</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">聊城</a>
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">滨州</a>          
          <a href="<a href="http://www.wxwdesign.cn" target="_blank" rel="external">http://www.wxwdesign.cn</a>">菏泽</a>
     </div>
  </li>
</ul>
<script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" target="_blank" rel="external">http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js</a>"></script>
<script type="text/javascript">
var nav_main=$("#nav>li");
var nav_child=$("#nav>li>div");

nav_main.each(function(i){$(this).hover(
   function(){
      nav_child.eq(i).slideDown(); //show
   },
   function(){
      nav_child.eq(i).slideUp();  //hidden
   });
});
</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

JQuery div:hover CSS3 animation