<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	>

<channel>
	<title>队长 发现目标</title>
	<atom:link href="http://www.eyike.com/blog/feed" rel="self" type="application/rss+xml" />
	<link>http://www.eyike.com/blog</link>
	<description>又一个不能坚持写博客的人</description>
	<pubDate>Wed, 01 Oct 2008 13:40:15 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.7</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>十一京东行</title>
		<link>http://www.eyike.com/blog/2008/10/01/shiyijingdongxing.html</link>
		<comments>http://www.eyike.com/blog/2008/10/01/shiyijingdongxing.html#comments</comments>
		<pubDate>Wed, 01 Oct 2008 13:36:13 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[杂七杂八]]></category>

		<category><![CDATA[石林峡]]></category>

		<category><![CDATA[国庆]]></category>

		<category><![CDATA[旅游]]></category>

		<category><![CDATA[京东大溶洞]]></category>

		<guid isPermaLink="false">http://www.eyike.com/blog/?p=72</guid>
		<description><![CDATA[十一约上朋友去了趟向往已久的京东大溶洞，这溶洞可不得了啊，有15亿年历史了啊，比恐龙都久远。从东直门做918到平谷县城（打岔下：这个世界真小，在东直门上厕所都能碰到同事 =_=!），大概1个小时50分钟的车程到达平谷区医院，然后做小巴8路去大溶洞，实际上小巴非常小，而且N久发一班，所以我们干脆找了个面包车，30块钱到大溶洞，后来发现贵了。。。到了大溶洞，立马买票进去，票价50，偏贵，听说里面挺冷，要租毛毯，没上当，其实里面不冷。进冻立马照了两张相，后来洞里不让照了。
 


要BS下大溶洞的就是在洞完了的时候，导游给了你三条路选，第一：花15块钱坐船到溶洞二期，水帘洞。第二：花5块钱，忘了坐到哪了。第三：不花钱，自己从一条300米的洞出去，至于出去是哪里，没人知道。所以没人选第三种，我们也随众花了15块钱坐了一回船，这是本次出游最失败的地方。
从溶洞出来爬了溶洞所在的山，佛山，很陡，山上有一尊很大的金佛，途中遇到很多打屁虫，当地话叫“香姑娘”。从山上下来，直奔吃饭的地方，非常想吃烧烤。

吃饭的地方看起来挺光艳的，其实环境很恶劣，打屁虫和苍蝇太多了，烤的肉精还嚼不动，最后匆匆吃了点，3个人花了92，也算很贵了。
吃完饭，找了个车去往石林峡，由于去的时候块下午4点了，所以找住处就不是很方便了，当地农家都趁国庆的时候赚一把呢，所以房价都偏高，120一晚，偶们是穷人，住不起，本打算回县城住，第二天再来的，往回走的路上在石林峡的门后一农家招呼着住房吃饭，问之曰50，住之，无厕，不好意思，写成文言文了，继续，当天晚上吃了条烤虹鳟鱼而已。早上7点起床，无法不起床，太吵了，不知道哪来那么多欧巴桑，吵死人。
起床出略打整了下出发，到售票处，售票员睡意朦胧的告之电脑刚启动。等了一下，然后买票，进山，很幸运，我们是第一个进山的团队，选择了最陡的一面上山，计划从另一面下山。过程就不说了，险象环生，腿现在都还在痛。来两张路上的风景吧。

还是不错的，雾蒙蒙的

好不容易到山顶了，做了国庆第一个敲响天下第一钟的人，哈哈。不想写了，写得手痛，来两张山顶上的风景吧。




按计划到另一面下山，结果被告之除了坐缆车，另一面不能下去，恐怖的缆车，我可不敢坐，于是原路返回在半山腰的岔路上选择另一条路下山，才发现大部分的人选择的这条路上山，这条路果然很平坦。。。，路遇石林。

一路下山，出山，上车，回家，吃饭，开机，写博客。照片太多，太大，以上照片为压缩后的。
相关文章js学习笔记：行为和结构的分离 setInterval的应用2008年8月31扫到的部分未注册双字节拼音域名js笔记:模拟下拉列表几个常用的方法JS笔记：构造函数，类，类属性，类方法js学习笔记：setInterval()的进一步理解js笔记：动态创建HTML内容firefox下的英文强制断行js笔记：一个提示跟随鼠标的效果一个关于UL制作列表对齐的问题收集了4款FPS大作初写JS，一个按时期显示不同内容的效果js笔记：点击轮换修了按时间显示不同内容的效果的代码js笔记：动态创建HTML内容[改进版]看来Safari更标准点击增加输入框js笔记：setInterval和clearInterval九九乘法表]]></description>
			<content:encoded><![CDATA[<p>十一约上朋友去了趟向往已久的京东大溶洞，这溶洞可不得了啊，有15亿年历史了啊，比恐龙都久远。从东直门做918到平谷县城（打岔下：这个世界真小，在东直门上厕所都能碰到同事 =_=!），大概1个小时50分钟的车程到达平谷区医院，然后做小巴8路去大溶洞，实际上小巴非常小，而且N久发一班，所以我们干脆找了个面包车，30块钱到大溶洞，后来发现贵了。。。到了大溶洞，立马买票进去，票价50，偏贵，听说里面挺冷，要租毛毯，没上当，其实里面不冷。进冻立马照了两张相，后来洞里不让照了。</p>
<p style="text-align: center;"> </p>
<p style="text-align: center;"><a href="http://www.eyike.com/blog/wp-content/uploads/2008/10/resize-of-resize-of-dscn0081.jpg"><img class="aligncenter size-full wp-image-74" title="京东大溶洞" src="http://www.eyike.com/blog/wp-content/uploads/2008/10/resize-of-resize-of-dscn0081.jpg" alt="" width="500" height="375" /></a></p>
<p style="text-align: center;"><a href="http://www.eyike.com/blog/wp-content/uploads/2008/10/resize-of-resize-of-dscn0077.jpg"><img class="aligncenter size-medium wp-image-73" title="京东大溶洞" src="http://www.eyike.com/blog/wp-content/uploads/2008/10/resize-of-resize-of-dscn0077-300x225.jpg" alt="" width="300" height="225" /></a></p>
<p>要BS下大溶洞的就是在洞完了的时候，导游给了你三条路选，第一：花15块钱坐船到溶洞二期，水帘洞。第二：花5块钱，忘了坐到哪了。第三：不花钱，自己从一条300米的洞出去，至于出去是哪里，没人知道。所以没人选第三种，我们也随众花了15块钱坐了一回船，这是本次出游最失败的地方。</p>
<p>从溶洞出来爬了溶洞所在的山，佛山，很陡，山上有一尊很大的金佛，途中遇到很多打屁虫，当地话叫“香姑娘”。从山上下来，直奔吃饭的地方，非常想吃烧烤。</p>
<p style="text-align: center;"><a href="http://www.eyike.com/blog/wp-content/uploads/2008/10/resize-of-resize-of-dscn0075.jpg"><img class="aligncenter size-full wp-image-75" title="佛山" src="http://www.eyike.com/blog/wp-content/uploads/2008/10/resize-of-resize-of-dscn0075.jpg" alt="" width="500" height="375" /></a></p>
<p>吃饭的地方看起来挺光艳的，其实环境很恶劣，打屁虫和苍蝇太多了，烤的肉精还嚼不动，最后匆匆吃了点，3个人花了92，也算很贵了。</p>
<p>吃完饭，找了个车去往石林峡，由于去的时候块下午4点了，所以找住处就不是很方便了，当地农家都趁国庆的时候赚一把呢，所以房价都偏高，120一晚，偶们是穷人，住不起，本打算回县城住，第二天再来的，往回走的路上在石林峡的门后一农家招呼着住房吃饭，问之曰50，住之，无厕，不好意思，写成文言文了，继续，当天晚上吃了条烤虹鳟鱼而已。早上7点起床，无法不起床，太吵了，不知道哪来那么多欧巴桑，吵死人。</p>
<p>起床出略打整了下出发，到售票处，售票员睡意朦胧的告之电脑刚启动。等了一下，然后买票，进山，很幸运，我们是第一个进山的团队，选择了最陡的一面上山，计划从另一面下山。过程就不说了，险象环生，腿现在都还在痛。来两张路上的风景吧。</p>
<p style="text-align: center;"><a href="http://www.eyike.com/blog/wp-content/uploads/2008/10/resize-of-resize-of-dscn0149.jpg"><img class="aligncenter size-full wp-image-76" title="山腰" src="http://www.eyike.com/blog/wp-content/uploads/2008/10/resize-of-resize-of-dscn0149.jpg" alt="" width="500" height="375" /></a></p>
<p>还是不错的，雾蒙蒙的</p>
<p style="text-align: center;"><img class="aligncenter size-full wp-image-77" title="山腰" src="http://www.eyike.com/blog/wp-content/uploads/2008/10/resize-of-resize-of-dscn0154.jpg" alt="" width="500" height="375" /></p>
<p>好不容易到山顶了，做了国庆第一个敲响天下第一钟的人，哈哈。不想写了，写得手痛，来两张山顶上的风景吧。</p>
<p style="text-align: center;"><a href="http://www.eyike.com/blog/wp-content/uploads/2008/10/resize-of-resize-of-dscn0185.jpg"><img class="aligncenter size-full wp-image-78" title="一览众山小" src="http://www.eyike.com/blog/wp-content/uploads/2008/10/resize-of-resize-of-dscn0185.jpg" alt="" width="500" height="375" /></a></p>
<p style="text-align: center;"><a href="http://www.eyike.com/blog/wp-content/uploads/2008/10/resize-of-resize-of-dscn0174.jpg"><img class="alignright size-full wp-image-79" title="石林山" src="http://www.eyike.com/blog/wp-content/uploads/2008/10/resize-of-resize-of-dscn0174.jpg" alt="" width="500" height="375" /></a></p>
<p style="text-align: center;"><a href="http://www.eyike.com/blog/wp-content/uploads/2008/10/resize-of-resize-of-dscn0183.jpg"><img class="aligncenter size-full wp-image-81" title="山顶" src="http://www.eyike.com/blog/wp-content/uploads/2008/10/resize-of-resize-of-dscn0183.jpg" alt="" width="500" height="375" /></a></p>
<p style="text-align: center;"><a href="http://www.eyike.com/blog/wp-content/uploads/2008/10/resize-of-resize-of-dscn0173.jpg"><img class="aligncenter size-full wp-image-80" title="山顶" src="http://www.eyike.com/blog/wp-content/uploads/2008/10/resize-of-resize-of-dscn0173.jpg" alt="" width="500" height="375" /></a></p>
<p>按计划到另一面下山，结果被告之除了坐缆车，另一面不能下去，恐怖的缆车，我可不敢坐，于是原路返回在半山腰的岔路上选择另一条路下山，才发现大部分的人选择的这条路上山，这条路果然很平坦。。。，路遇石林。</p>
<p style="text-align: center;"><a href="http://www.eyike.com/blog/wp-content/uploads/2008/10/resize-of-resize-of-dscn0193.jpg"><img class="aligncenter size-full wp-image-82" title="石林" src="http://www.eyike.com/blog/wp-content/uploads/2008/10/resize-of-resize-of-dscn0193.jpg" alt="" width="500" height="375" /></a></p>
<p>一路下山，出山，上车，回家，吃饭，开机，写博客。照片太多，太大，以上照片为压缩后的。</p>
<h3>相关文章</h3><ul class="related_post"><li><a href="http://www.eyike.com/blog/2008/07/01/jsxuexibijixingweihejiegoudefenlisetintervaldeyingyong.html" title="js学习笔记：行为和结构的分离 setInterval的应用">js学习笔记：行为和结构的分离 setInterval的应用</a></li><li><a href="http://www.eyike.com/blog/2007/12/04/safari.html" title="看来Safari更标准">看来Safari更标准</a></li><li><a href="http://www.eyike.com/blog/2008/07/04/jsbijisetintervalheclearinterval.html" title="js笔记：setInterval和clearInterval">js笔记：setInterval和clearInterval</a></li><li><a href="http://www.eyike.com/blog/2007/12/24/dianjizengjiashurukuang.html" title="点击增加输入框">点击增加输入框</a></li><li><a href="http://www.eyike.com/blog/2007/12/21/firefoxxiadeyingwenqiangzhiduanxing.html" title="firefox下的英文强制断行">firefox下的英文强制断行</a></li><li><a href="http://www.eyike.com/blog/2008/07/02/jsxuexibijisetintervaldeshenrulijie.html" title="js学习笔记：setInterval()的进一步理解">js学习笔记：setInterval()的进一步理解</a></li><li><a href="http://www.eyike.com/blog/2008/07/16/jsbijiyigetishigensuishubiaodexiaoguo.html" title="js笔记：一个提示跟随鼠标的效果">js笔记：一个提示跟随鼠标的效果</a></li><li><a href="http://www.eyike.com/blog/2008/07/31/jsbijidongtaichuangjianhtmlneironggaijinban.html" title="js笔记：动态创建HTML内容[改进版]">js笔记：动态创建HTML内容[改进版]</a></li><li><a href="http://www.eyike.com/blog/2008/09/18/jigechangyongdefangfa.html" title="几个常用的方法">几个常用的方法</a></li><li><a href="http://www.eyike.com/blog/2008/08/04/jsbijimonixialaliebiao.html" title="js笔记:模拟下拉列表">js笔记:模拟下拉列表</a></li><li><a href="http://www.eyike.com/blog/2008/07/30/jsbijidongtaichuangjianhtmlneirong.html" title="js笔记：动态创建HTML内容">js笔记：动态创建HTML内容</a></li><li><a href="http://www.eyike.com/blog/2008/07/31/jsxuexibijidianjilunhuan.html" title="js笔记：点击轮换">js笔记：点击轮换</a></li><li><a href="http://www.eyike.com/blog/2007/11/30/%e4%b9%9d%e4%b9%9d%e4%b9%98%e6%b3%95%e8%a1%a8.html" title="九九乘法表">九九乘法表</a></li><li><a href="http://www.eyike.com/blog/2007/12/06/chuxiejsyigeanshiqixianshibutongneirongdexiaoguo.html" title="初写JS，一个按时期显示不同内容的效果">初写JS，一个按时期显示不同内容的效果</a></li><li><a href="http://www.eyike.com/blog/2007/11/28/ul.html" title="一个关于UL制作列表对齐的问题">一个关于UL制作列表对齐的问题</a></li><li><a href="http://www.eyike.com/blog/2008/07/23/shoujiliao4kuanfpsdazuo.html" title="收集了4款FPS大作">收集了4款FPS大作</a></li><li><a href="http://www.eyike.com/blog/2008/08/31/2008nian8yue31saodaodebufenweizhuceshuangzijiepinyinyuming.html" title="2008年8月31扫到的部分未注册双字节拼音域名">2008年8月31扫到的部分未注册双字节拼音域名</a></li><li><a href="http://www.eyike.com/blog/2007/12/06/xiuliaoanshijianxianshibutongneirongdexiaoguodedaima.html" title="修了按时间显示不同内容的效果的代码">修了按时间显示不同内容的效果的代码</a></li><li><a href="http://www.eyike.com/blog/2008/09/23/jsbijigouzaohanshuleileishuxingleifangfa.html" title="JS笔记：构造函数，类，类属性，类方法">JS笔记：构造函数，类，类属性，类方法</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.eyike.com/blog/2008/10/01/shiyijingdongxing.html/feed</wfw:commentRss>
		</item>
		<item>
		<title>JS笔记：构造函数，类，类属性，类方法</title>
		<link>http://www.eyike.com/blog/2008/09/23/jsbijigouzaohanshuleileishuxingleifangfa.html</link>
		<comments>http://www.eyike.com/blog/2008/09/23/jsbijigouzaohanshuleileishuxingleifangfa.html#comments</comments>
		<pubDate>Tue, 23 Sep 2008 06:48:51 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[js笔记]]></category>

		<category><![CDATA[类]]></category>

		<category><![CDATA[类属性]]></category>

		<category><![CDATA[类方法]]></category>

		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.eyike.com/blog/?p=70</guid>
		<description><![CDATA[&#60;script type=&#34;text/javascript&#34;&#62;
&#160; &#160; &#160; &#160; function&#160;Circle(radius){
&#160; &#160; &#160; &#160; &#160; &#160; this.r = radius;
&#160; &#160; &#160; &#160; }
&#160; &#160; &#160; &#160; Circle.PI = 3.1415926;
&#160; &#160; &#160; &#160; Circle.prototype.area = function(){
&#160; &#160; &#160; &#160; &#160; &#160; return&#160;Circle.PI * this.r * this.r;
&#160; &#160; &#160; &#160; }
&#160; &#160; &#160; &#160; Circle.max = function(a,b){
&#160; &#160; &#160; &#160; &#160; &#160; [...]]]></description>
			<content:encoded><![CDATA[<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Gray;">&lt;</span><span style="color: Blue;">script</span><span style="color: Gray;"> </span><span style="color: Blue;">type</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">text/javascript</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">function</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">Circle</span><span style="color: Olive;">(</span><span style="color: Blue;">radius</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">this</span><span style="color: Gray;">.</span><span style="color: Blue;">r</span><span style="color: Gray;"> = </span><span style="color: Blue;">radius</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">Circle</span><span style="color: Gray;">.</span><span style="color: Blue;">PI</span><span style="color: Gray;"> = </span><span style="color: Maroon;">3.1415926</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">Circle</span><span style="color: Gray;">.</span><span style="color: Blue;">prototype</span><span style="color: Gray;">.</span><span style="color: Blue;">area</span><span style="color: Gray;"> = </span><span style="color: Green;">function</span><span style="color: Olive;">(){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">return</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">Circle</span><span style="color: Gray;">.</span><span style="color: Blue;">PI</span><span style="color: Gray;"> * </span><span style="color: Green;">this</span><span style="color: Gray;">.</span><span style="color: Blue;">r</span><span style="color: Gray;"> * </span><span style="color: Green;">this</span><span style="color: Gray;">.</span><span style="color: Blue;">r</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">Circle</span><span style="color: Gray;">.</span><span style="color: Blue;">max</span><span style="color: Gray;"> = </span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">a</span><span style="color: Gray;">,</span><span style="color: Blue;">b</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: Blue;">a</span><span style="color: Gray;">.</span><span style="color: Blue;">r</span><span style="color: Gray;"> &gt; </span><span style="color: Blue;">b</span><span style="color: Gray;">.</span><span style="color: Blue;">r</span><span style="color: Olive;">)</span><span style="color: Gray;">&nbsp;</span><span style="color: Green;">return</span><span style="color: Gray;"> </span><span style="color: Blue;">a</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">else</span><span style="color: Gray;">&nbsp;</span><span style="color: Green;">return</span><span style="color: Gray;"> </span><span style="color: Blue;">b</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">c</span><span style="color: Gray;"> = </span><span style="color: Green;">new</span><span style="color: Gray;"> </span><span style="color: Blue;">Circle</span><span style="color: Olive;">(</span><span style="color: Maroon;">1.0</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">c</span><span style="color: Gray;">.</span><span style="color: Blue;">r</span><span style="color: Gray;"> = </span><span style="color: Maroon;">2.2</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">d</span><span style="color: Gray;"> = </span><span style="color: Green;">new</span><span style="color: Gray;"> </span><span style="color: Blue;">Circle</span><span style="color: Olive;">(</span><span style="color: Maroon;">1.2</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">alert</span><span style="color: Olive;">(</span><span style="color: Blue;">Circle</span><span style="color: Gray;">.</span><span style="color: Blue;">max</span><span style="color: Olive;">(</span><span style="color: Blue;">c</span><span style="color: Gray;">,</span><span style="color: Blue;">d</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: Blue;">r</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &lt;</span><span style="color: #8b0000;">/</span><span style="color: Red;">script&gt;</span></li></ol></div>
<h3>相关文章</h3><ul class="related_post"><li><a href="http://www.eyike.com/blog/2008/09/18/jigechangyongdefangfa.html" title="几个常用的方法">几个常用的方法</a></li><li><a href="http://www.eyike.com/blog/2008/07/31/jsxuexibijidianjilunhuan.html" title="js笔记：点击轮换">js笔记：点击轮换</a></li><li><a href="http://www.eyike.com/blog/2008/07/31/jsbijidongtaichuangjianhtmlneironggaijinban.html" title="js笔记：动态创建HTML内容[改进版]">js笔记：动态创建HTML内容[改进版]</a></li><li><a href="http://www.eyike.com/blog/2008/07/30/jsbijidongtaichuangjianhtmlneirong.html" title="js笔记：动态创建HTML内容">js笔记：动态创建HTML内容</a></li><li><a href="http://www.eyike.com/blog/2008/07/16/jsbijiyigetishigensuishubiaodexiaoguo.html" title="js笔记：一个提示跟随鼠标的效果">js笔记：一个提示跟随鼠标的效果</a></li><li><a href="http://www.eyike.com/blog/2007/12/24/dianjizengjiashurukuang.html" title="点击增加输入框">点击增加输入框</a></li><li><a href="http://www.eyike.com/blog/2007/12/21/firefoxxiadeyingwenqiangzhiduanxing.html" title="firefox下的英文强制断行">firefox下的英文强制断行</a></li><li><a href="http://www.eyike.com/blog/2007/12/06/xiuliaoanshijianxianshibutongneirongdexiaoguodedaima.html" title="修了按时间显示不同内容的效果的代码">修了按时间显示不同内容的效果的代码</a></li><li><a href="http://www.eyike.com/blog/2007/12/06/chuxiejsyigeanshiqixianshibutongneirongdexiaoguo.html" title="初写JS，一个按时期显示不同内容的效果">初写JS，一个按时期显示不同内容的效果</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.eyike.com/blog/2008/09/23/jsbijigouzaohanshuleileishuxingleifangfa.html/feed</wfw:commentRss>
		</item>
		<item>
		<title>几个常用的方法</title>
		<link>http://www.eyike.com/blog/2008/09/18/jigechangyongdefangfa.html</link>
		<comments>http://www.eyike.com/blog/2008/09/18/jigechangyongdefangfa.html#comments</comments>
		<pubDate>Thu, 18 Sep 2008 10:29:01 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[js笔记]]></category>

		<category><![CDATA[addCss]]></category>

		<category><![CDATA[class]]></category>

		<category><![CDATA[javascript]]></category>

		<category><![CDATA[removeCss]]></category>

		<guid isPermaLink="false">http://www.eyike.com/blog/?p=67</guid>
		<description><![CDATA[//通过指定class和指定标签的对象
function&#160;getClass(tag,cssName){
&#160; &#160; if(!document.getElementsByTagName(tag))&#160;return;
&#160; &#160; var&#160;tags = document.getElementsByTagName(tag);
&#160; &#160; var&#160;cssName;
&#160; &#160; var&#160;arr = [];
&#160; &#160; for(var&#160;i = 0;i &#60; tags.length;i++){
&#160; &#160; &#160; &#160; if(tags[i].className == cssName){
&#160; &#160; &#160; &#160; &#160; &#160; arr.push(tags[i]);
&#160; &#160; &#160; &#160; &#160; &#160; return&#160;arr;
&#160; &#160; &#160; &#160; }
&#160; &#160; }
}
//获得指定id的对象
function&#160;getId(idName){
&#160; &#160; return&#160;document.getElementById(idName);
}
//为指定对象添加指定的class
function&#160;addCss(element,cssName){&#160;
&#160; &#160; var&#160;element,cssName; 
&#160; &#160; if&#160;(!element.className &#124;&#124; element.className == cssName){&#160;
&#160; &#160; [...]]]></description>
			<content:encoded><![CDATA[<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: #ffa500;">//通过指定class和指定标签的对象</span></li>
<li><span style="color: Green;">function</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">getClass</span><span style="color: Olive;">(</span><span style="color: Blue;">tag</span><span style="color: Gray;">,</span><span style="color: Blue;">cssName</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: Gray;">!</span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: Blue;">getElementsByTagName</span><span style="color: Olive;">(</span><span style="color: Blue;">tag</span><span style="color: Olive;">))</span><span style="color: Gray;">&nbsp;</span><span style="color: Green;">return</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">tags</span><span style="color: Gray;"> = </span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: Blue;">getElementsByTagName</span><span style="color: Olive;">(</span><span style="color: Blue;">tag</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">cssName</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">arr</span><span style="color: Gray;"> = </span><span style="color: Olive;">[]</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">for</span><span style="color: Olive;">(</span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">i</span><span style="color: Gray;"> = </span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span><span style="color: Blue;">i</span><span style="color: Gray;"> &lt; </span><span style="color: Blue;">tags</span><span style="color: Gray;">.</span><span style="color: Blue;">length</span><span style="color: Gray;">;</span><span style="color: Blue;">i</span><span style="color: Gray;">++</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: Blue;">tags</span><span style="color: Olive;">[</span><span style="color: Blue;">i</span><span style="color: Olive;">]</span><span style="color: Gray;">.</span><span style="color: Blue;">className</span><span style="color: Gray;"> == </span><span style="color: Blue;">cssName</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">arr</span><span style="color: Gray;">.</span><span style="color: Blue;">push</span><span style="color: Olive;">(</span><span style="color: Blue;">tags</span><span style="color: Olive;">[</span><span style="color: Blue;">i</span><span style="color: Olive;">])</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">return</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">arr</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Olive;">}</span></li>
<li><span style="color: #ffa500;">//获得指定id的对象</span></li>
<li><span style="color: Green;">function</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">getId</span><span style="color: Olive;">(</span><span style="color: Blue;">idName</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">return</span><span style="color: Gray;">&nbsp;</span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: Blue;">getElementById</span><span style="color: Olive;">(</span><span style="color: Blue;">idName</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span></li>
<li><span style="color: #ffa500;">//为指定对象添加指定的class</span></li>
<li><span style="color: Green;">function</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">addCss</span><span style="color: Olive;">(</span><span style="color: Blue;">element</span><span style="color: Gray;">,</span><span style="color: Blue;">cssName</span><span style="color: Olive;">){</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">element</span><span style="color: Gray;">,</span><span style="color: Blue;">cssName</span><span style="color: Gray;">; </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">(</span><span style="color: Gray;">!</span><span style="color: Blue;">element</span><span style="color: Gray;">.</span><span style="color: Blue;">className</span><span style="color: Gray;"> || </span><span style="color: Blue;">element</span><span style="color: Gray;">.</span><span style="color: Blue;">className</span><span style="color: Gray;"> == </span><span style="color: Blue;">cssName</span><span style="color: Olive;">){</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">element</span><span style="color: Gray;">.</span><span style="color: Blue;">className</span><span style="color: Gray;"> = </span><span style="color: Blue;">cssName</span><span style="color: Gray;">; </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">else</span><span style="color: Olive;">{</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">element</span><span style="color: Gray;">.</span><span style="color: Blue;">className</span><span style="color: Gray;"> = </span><span style="color: Blue;">element</span><span style="color: Gray;">.</span><span style="color: Blue;">className</span><span style="color: Gray;"> + </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">&nbsp;</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> + </span><span style="color: Blue;">cssName</span><span style="color: Gray;">; </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">}</span></li>
<li><span style="color: #ffa500;">//移除指定对象的指定class</span></li>
<li><span style="color: Green;">function</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">removeCss</span><span style="color: Olive;">(</span><span style="color: Blue;">element</span><span style="color: Gray;">,</span><span style="color: Blue;">cssName</span><span style="color: Olive;">){</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">element</span><span style="color: Gray;">,</span><span style="color: Blue;">cssName</span><span style="color: Gray;">; </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">oldCss</span><span style="color: Gray;"> = </span><span style="color: Blue;">element</span><span style="color: Gray;">.</span><span style="color: Blue;">className</span><span style="color: Gray;">; </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">cssList</span><span style="color: Gray;"> = </span><span style="color: Blue;">oldCss</span><span style="color: Gray;">.</span><span style="color: Blue;">split</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;"> </span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">; </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">for</span><span style="color: Olive;">(</span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">i</span><span style="color: Gray;"> = </span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span><span style="color: Blue;">i</span><span style="color: Gray;"> &lt; </span><span style="color: Blue;">cssList</span><span style="color: Gray;">.</span><span style="color: Blue;">length</span><span style="color: Gray;">;</span><span style="color: Blue;">i</span><span style="color: Gray;">++</span><span style="color: Olive;">){</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">(</span><span style="color: Blue;">cssList</span><span style="color: Olive;">[</span><span style="color: Blue;">i</span><span style="color: Olive;">]</span><span style="color: Gray;"> == </span><span style="color: Blue;">cssName</span><span style="color: Olive;">)</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">cssList</span><span style="color: Olive;">[</span><span style="color: Blue;">i</span><span style="color: Olive;">]</span><span style="color: Gray;"> = </span><span style="color: #8b0000;">&quot;&quot;</span><span style="color: Gray;">; </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">break</span><span style="color: Gray;">; </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">element</span><span style="color: Gray;">.</span><span style="color: Blue;">className</span><span style="color: Gray;"> = </span><span style="color: Blue;">cssList</span><span style="color: Gray;">.</span><span style="color: Blue;">join</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">&nbsp;</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">; </span></li>
<li><span style="color: Olive;">}</span></li></ol></div>
<h3>相关文章</h3><ul class="related_post"><li><a href="http://www.eyike.com/blog/2008/09/23/jsbijigouzaohanshuleileishuxingleifangfa.html" title="JS笔记：构造函数，类，类属性，类方法">JS笔记：构造函数，类，类属性，类方法</a></li><li><a href="http://www.eyike.com/blog/2008/07/31/jsxuexibijidianjilunhuan.html" title="js笔记：点击轮换">js笔记：点击轮换</a></li><li><a href="http://www.eyike.com/blog/2008/07/31/jsbijidongtaichuangjianhtmlneironggaijinban.html" title="js笔记：动态创建HTML内容[改进版]">js笔记：动态创建HTML内容[改进版]</a></li><li><a href="http://www.eyike.com/blog/2008/07/30/jsbijidongtaichuangjianhtmlneirong.html" title="js笔记：动态创建HTML内容">js笔记：动态创建HTML内容</a></li><li><a href="http://www.eyike.com/blog/2008/07/16/jsbijiyigetishigensuishubiaodexiaoguo.html" title="js笔记：一个提示跟随鼠标的效果">js笔记：一个提示跟随鼠标的效果</a></li><li><a href="http://www.eyike.com/blog/2007/12/24/dianjizengjiashurukuang.html" title="点击增加输入框">点击增加输入框</a></li><li><a href="http://www.eyike.com/blog/2007/12/21/firefoxxiadeyingwenqiangzhiduanxing.html" title="firefox下的英文强制断行">firefox下的英文强制断行</a></li><li><a href="http://www.eyike.com/blog/2007/12/06/xiuliaoanshijianxianshibutongneirongdexiaoguodedaima.html" title="修了按时间显示不同内容的效果的代码">修了按时间显示不同内容的效果的代码</a></li><li><a href="http://www.eyike.com/blog/2007/12/06/chuxiejsyigeanshiqixianshibutongneirongdexiaoguo.html" title="初写JS，一个按时期显示不同内容的效果">初写JS，一个按时期显示不同内容的效果</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.eyike.com/blog/2008/09/18/jigechangyongdefangfa.html/feed</wfw:commentRss>
		</item>
		<item>
		<title>2008年8月31扫到的部分未注册双字节拼音域名</title>
		<link>http://www.eyike.com/blog/2008/08/31/2008nian8yue31saodaodebufenweizhuceshuangzijiepinyinyuming.html</link>
		<comments>http://www.eyike.com/blog/2008/08/31/2008nian8yue31saodaodebufenweizhuceshuangzijiepinyinyuming.html#comments</comments>
		<pubDate>Sun, 31 Aug 2008 15:25:02 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[备忘]]></category>

		<category><![CDATA[域名]]></category>

		<category><![CDATA[拼音域名]]></category>

		<category><![CDATA[未注册域名]]></category>

		<guid isPermaLink="false">http://www.eyike.com/blog/?p=60</guid>
		<description><![CDATA[2008年8月31扫到的部分未注册双字节拼音域名,.com的,很多

SaJiong.com
SenLuan.com
PenHai.com
CunXie.com
SunLeng.com
PanDiao.com
GongCa.com
LiaChuai.com
PieGuai.com
ZhePie.com
DiuXie.com
GunZhao.com
QvShui.com
BieShou.com
SaoJuan.com
ChuiXiong.com
RuQiao.com
ChanXiong.com
BuShai.com
HuangJv.com
CaShuang.com
KuiBie.com
NiangGuai.com
ZongRuan.com
PinHen.com
SiKeng.com
JueNv.com
PiaoHei.com
WengMiao.com
ZouRuan.com
MengDiao.com
SuoKuang.com
NongHa.com
YeNiang.com
SengLi.com
JiuQv.com
ZhunRi.com
ZhengShuan.com
TunZang.com
CeSong.com
NianFou.com
GouZen.com
ChaiTiao.com
YoTuan.com
DiuYin.com
DiuXin.com
FanZang.com
DouJue.com
KuangCeng.com
JiaoBie.com
NiuNuan.com
NuanHan.com
QiongLei.com
ChengBeng.com
HaZheng.com
GunLai.com
ChuiYo.com
PianPin.com
RangJiong.com
PenReng.com
HeiZhuai.com
AnReng.com
JiaZhuai.com
ZuiRang.com
KengBu.com
NiangShai.com
KuoBing.com
ChouTuo.com
ShuanZhuan.com
ChuoDi.com
XingNin.com
DuanZen.com
TuanNue.com
ManNiang.com
LieChun.com
MiuOu.com
QiangSui.com
LiaoRi.com
FouZeng.com
JueKan.com
RuoKen.com
ChiTui.com
MangDui.com
WaLiu.com
ZhuangSang.com
NingGun.com
TiaoMeng.com
LuanCui.com
LueDing.com
MiuJuan.com
QueHou.com
NieGuang.com
LouCu.com
ChuaiXie.com
LengChou.com
ZhangSao.com
HuanZou.com
JuanBen.com
NueFen.com
ZhaRao.com
相关文章js学习笔记：setInterval()的进一步理解js学习笔记：行为和结构的分离 setInterval的应用点击增加输入框十一京东行js笔记：动态创建HTML内容js笔记：一个提示跟随鼠标的效果一个关于UL制作列表对齐的问题js笔记:模拟下拉列表js笔记：动态创建HTML内容[改进版]看来Safari更标准九九乘法表firefox下的英文强制断行JS笔记：构造函数，类，类属性，类方法收集了4款FPS大作修了按时间显示不同内容的效果的代码初写JS，一个按时期显示不同内容的效果js笔记：点击轮换js笔记：setInterval和clearInterval几个常用的方法]]></description>
			<content:encoded><![CDATA[<p>2008年8月31扫到的部分未注册双字节拼音域名,.com的,很多</p>
<blockquote><p>
SaJiong.com<br />
SenLuan.com<br />
PenHai.com<br />
CunXie.com<br />
SunLeng.com<br />
PanDiao.com<br />
GongCa.com<br />
LiaChuai.com<br />
PieGuai.com<br />
ZhePie.com<br />
DiuXie.com<br />
GunZhao.com<br />
QvShui.com<br />
BieShou.com<br />
SaoJuan.com<br />
ChuiXiong.com<br />
RuQiao.com<br />
ChanXiong.com<br />
BuShai.com<br />
HuangJv.com<br />
CaShuang.com<br />
KuiBie.com<br />
NiangGuai.com<br />
ZongRuan.com<br />
PinHen.com<br />
SiKeng.com<br />
JueNv.com<br />
PiaoHei.com<br />
WengMiao.com<br />
ZouRuan.com<br />
MengDiao.com<br />
SuoKuang.com<br />
NongHa.com<br />
YeNiang.com<br />
SengLi.com<br />
JiuQv.com<br />
ZhunRi.com<br />
ZhengShuan.com<br />
TunZang.com<br />
CeSong.com<br />
NianFou.com<br />
GouZen.com<br />
ChaiTiao.com<br />
YoTuan.com<br />
DiuYin.com<br />
DiuXin.com<br />
FanZang.com<br />
DouJue.com<br />
KuangCeng.com<br />
JiaoBie.com<br />
NiuNuan.com<br />
NuanHan.com<br />
QiongLei.com<br />
ChengBeng.com<br />
HaZheng.com<br />
GunLai.com<br />
ChuiYo.com<br />
PianPin.com<br />
RangJiong.com<br />
PenReng.com<br />
HeiZhuai.com<br />
AnReng.com<br />
JiaZhuai.com<br />
ZuiRang.com<br />
KengBu.com<br />
NiangShai.com<br />
KuoBing.com<br />
ChouTuo.com<br />
ShuanZhuan.com<br />
ChuoDi.com<br />
XingNin.com<br />
DuanZen.com<br />
TuanNue.com<br />
ManNiang.com<br />
LieChun.com<br />
MiuOu.com<br />
QiangSui.com<br />
LiaoRi.com<br />
FouZeng.com<br />
JueKan.com<br />
RuoKen.com<br />
ChiTui.com<br />
MangDui.com<br />
WaLiu.com<br />
ZhuangSang.com<br />
NingGun.com<br />
TiaoMeng.com<br />
LuanCui.com<br />
LueDing.com<br />
MiuJuan.com<br />
QueHou.com<br />
NieGuang.com<br />
LouCu.com<br />
ChuaiXie.com<br />
LengChou.com<br />
ZhangSao.com<br />
HuanZou.com<br />
JuanBen.com<br />
NueFen.com<br />
ZhaRao.com</p></blockquote>
<h3>相关文章</h3><ul class="related_post"><li><a href="http://www.eyike.com/blog/2007/12/06/xiuliaoanshijianxianshibutongneirongdexiaoguodedaima.html" title="修了按时间显示不同内容的效果的代码">修了按时间显示不同内容的效果的代码</a></li><li><a href="http://www.eyike.com/blog/2008/07/02/jsxuexibijisetintervaldeshenrulijie.html" title="js学习笔记：setInterval()的进一步理解">js学习笔记：setInterval()的进一步理解</a></li><li><a href="http://www.eyike.com/blog/2007/11/30/%e4%b9%9d%e4%b9%9d%e4%b9%98%e6%b3%95%e8%a1%a8.html" title="九九乘法表">九九乘法表</a></li><li><a href="http://www.eyike.com/blog/2007/11/28/ul.html" title="一个关于UL制作列表对齐的问题">一个关于UL制作列表对齐的问题</a></li><li><a href="http://www.eyike.com/blog/2008/07/23/shoujiliao4kuanfpsdazuo.html" title="收集了4款FPS大作">收集了4款FPS大作</a></li><li><a href="http://www.eyike.com/blog/2007/12/21/firefoxxiadeyingwenqiangzhiduanxing.html" title="firefox下的英文强制断行">firefox下的英文强制断行</a></li><li><a href="http://www.eyike.com/blog/2008/07/04/jsbijisetintervalheclearinterval.html" title="js笔记：setInterval和clearInterval">js笔记：setInterval和clearInterval</a></li><li><a href="http://www.eyike.com/blog/2008/09/23/jsbijigouzaohanshuleileishuxingleifangfa.html" title="JS笔记：构造函数，类，类属性，类方法">JS笔记：构造函数，类，类属性，类方法</a></li><li><a href="http://www.eyike.com/blog/2008/10/01/shiyijingdongxing.html" title="十一京东行">十一京东行</a></li><li><a href="http://www.eyike.com/blog/2008/07/01/jsxuexibijixingweihejiegoudefenlisetintervaldeyingyong.html" title="js学习笔记：行为和结构的分离 setInterval的应用">js学习笔记：行为和结构的分离 setInterval的应用</a></li><li><a href="http://www.eyike.com/blog/2007/12/06/chuxiejsyigeanshiqixianshibutongneirongdexiaoguo.html" title="初写JS，一个按时期显示不同内容的效果">初写JS，一个按时期显示不同内容的效果</a></li><li><a href="http://www.eyike.com/blog/2008/07/30/jsbijidongtaichuangjianhtmlneirong.html" title="js笔记：动态创建HTML内容">js笔记：动态创建HTML内容</a></li><li><a href="http://www.eyike.com/blog/2007/12/24/dianjizengjiashurukuang.html" title="点击增加输入框">点击增加输入框</a></li><li><a href="http://www.eyike.com/blog/2008/07/31/jsxuexibijidianjilunhuan.html" title="js笔记：点击轮换">js笔记：点击轮换</a></li><li><a href="http://www.eyike.com/blog/2008/07/16/jsbijiyigetishigensuishubiaodexiaoguo.html" title="js笔记：一个提示跟随鼠标的效果">js笔记：一个提示跟随鼠标的效果</a></li><li><a href="http://www.eyike.com/blog/2008/08/04/jsbijimonixialaliebiao.html" title="js笔记:模拟下拉列表">js笔记:模拟下拉列表</a></li><li><a href="http://www.eyike.com/blog/2008/07/31/jsbijidongtaichuangjianhtmlneironggaijinban.html" title="js笔记：动态创建HTML内容[改进版]">js笔记：动态创建HTML内容[改进版]</a></li><li><a href="http://www.eyike.com/blog/2008/09/18/jigechangyongdefangfa.html" title="几个常用的方法">几个常用的方法</a></li><li><a href="http://www.eyike.com/blog/2007/12/04/safari.html" title="看来Safari更标准">看来Safari更标准</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.eyike.com/blog/2008/08/31/2008nian8yue31saodaodebufenweizhuceshuangzijiepinyinyuming.html/feed</wfw:commentRss>
		</item>
		<item>
		<title>js笔记:模拟下拉列表</title>
		<link>http://www.eyike.com/blog/2008/08/04/jsbijimonixialaliebiao.html</link>
		<comments>http://www.eyike.com/blog/2008/08/04/jsbijimonixialaliebiao.html#comments</comments>
		<pubDate>Mon, 04 Aug 2008 09:42:59 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[js笔记]]></category>

		<category><![CDATA[jvascript]]></category>

		<category><![CDATA[模拟下拉列表]]></category>

		<guid isPermaLink="false">http://www.eyike.com/blog/?p=56</guid>
		<description><![CDATA[html部分
&#60;div id=&#34;select&#34;&#62;
&#160; &#160; &#60;div&#160;id=&#34;selectHead&#34;&#62;First&#60;/div&#62;
&#160; &#160; &#60;ul&#160;id=&#34;csList&#34;&#62;
&#160; &#160; &#160; &#160; &#60;li&#160;class=&#34;cs&#34;&#62;First&#60;/li&#62;
&#160; &#160; &#160; &#160; &#60;li&#62;Seconde&#60;/li&#62;
&#160; &#160; &#160; &#160; &#60;li&#62;Third&#60;/li&#62;
&#160; &#160; &#60;/ul&#62;
&#60;/div&#62;
css部分
*{padding:0;margin:0;}
body{font:12px Arial;}
#select{width:100px;}
#select&#160;#selectHead{border:1px solid #ccc;line-height:20px;cursor:pointer;}
#select&#160;ul{border:1px solid #ccc;border-top:0;display:none;}
#select&#160;ul li{line-height:20px;cursor:default;}
#select&#160;.onhover{background:#0069ca;color:#fff;}
javascript部分
&#60;script type=&#34;text/javascript&#34;&#62;
&#160; &#160; function&#160;select(){
&#160; &#160; &#160; &#160; var&#160;selectHead = document.getElementById(&#34;selectHead&#34;);
&#160; &#160; &#160; &#160; var&#160;csList = document.getElementById(&#34;csList&#34;);
&#160; &#160; &#160; &#160; selectHead.onclick = function(){
&#160; &#160; &#160; &#160; &#160; &#160; if&#160;(csList.style.display != &#34;block&#34;) [...]]]></description>
			<content:encoded><![CDATA[<p>html部分</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Olive;">&lt;</span><span style="color: Green;">div</span><span style="color: Gray;"> </span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">select</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">div</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">selectHead</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">First</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">ul</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">csList</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">li</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">cs</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">First</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">li</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">Seconde</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">li</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">Third</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">li</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: Green;">ul</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span></li></ol></div>
<p>css部分</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Blue;">*</span><span style="color: Olive;">{</span><span style="color: Green;">padding:</span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span><span style="color: Green;">margin:</span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span><span style="color: Olive;">}</span></li>
<li><span style="color: Blue;">body</span><span style="color: Olive;">{</span><span style="color: Green;">font:</span><span style="color: Maroon;">12</span><span style="color: Red;">px</span><span style="color: Gray;"> Arial</span><span style="color: Gray;">;</span><span style="color: Olive;">}</span></li>
<li><span style="color: Blue;">#select</span><span style="color: Olive;">{</span><span style="color: Green;">width:</span><span style="color: Maroon;">100</span><span style="color: Red;">px</span><span style="color: Gray;">;</span><span style="color: Olive;">}</span></li>
<li><span style="color: Blue;">#select</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">#selectHead</span><span style="color: Olive;">{</span><span style="color: Green;">border:</span><span style="color: Maroon;">1</span><span style="color: Red;">px</span><span style="color: Gray;"> </span><span style="color: Red;">solid</span><span style="color: Gray;"> </span><span style="color: #00008b;">#ccc</span><span style="color: Gray;">;</span><span style="color: Green;">line-height:</span><span style="color: Maroon;">20</span><span style="color: Red;">px</span><span style="color: Gray;">;</span><span style="color: Green;">cursor:</span><span style="color: Red;">pointer</span><span style="color: Gray;">;</span><span style="color: Olive;">}</span></li>
<li><span style="color: Blue;">#select</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">ul</span><span style="color: Olive;">{</span><span style="color: Green;">border:</span><span style="color: Maroon;">1</span><span style="color: Red;">px</span><span style="color: Gray;"> </span><span style="color: Red;">solid</span><span style="color: Gray;"> </span><span style="color: #00008b;">#ccc</span><span style="color: Gray;">;</span><span style="color: Green;">border-top:</span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span><span style="color: Green;">display:</span><span style="color: Red;">none</span><span style="color: Gray;">;</span><span style="color: Olive;">}</span></li>
<li><span style="color: Blue;">#select</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">ul</span><span style="color: Gray;"> </span><span style="color: Blue;">li</span><span style="color: Olive;">{</span><span style="color: Green;">line-height:</span><span style="color: Maroon;">20</span><span style="color: Red;">px</span><span style="color: Gray;">;</span><span style="color: Green;">cursor:</span><span style="color: Red;">default</span><span style="color: Gray;">;</span><span style="color: Olive;">}</span></li>
<li><span style="color: Blue;">#select</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">.onhover</span><span style="color: Olive;">{</span><span style="color: Green;">background:</span><span style="color: #00008b;">#0069ca</span><span style="color: Gray;">;</span><span style="color: Green;">color:</span><span style="color: #00008b;">#fff</span><span style="color: Gray;">;</span><span style="color: Olive;">}</span></li></ol></div>
<p>javascript部分</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Gray;">&lt;</span><span style="color: Blue;">script</span><span style="color: Gray;"> </span><span style="color: Blue;">type</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">text/javascript</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">function</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">select</span><span style="color: Olive;">(){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">selectHead</span><span style="color: Gray;"> = </span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: Blue;">getElementById</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">selectHead</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">csList</span><span style="color: Gray;"> = </span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: Blue;">getElementById</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">csList</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">selectHead</span><span style="color: Gray;">.</span><span style="color: Blue;">onclick</span><span style="color: Gray;"> = </span><span style="color: Green;">function</span><span style="color: Olive;">(){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">(</span><span style="color: Blue;">csList</span><span style="color: Gray;">.</span><span style="color: Blue;">style</span><span style="color: Gray;">.</span><span style="color: Blue;">display</span><span style="color: Gray;"> != </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">block</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">csList</span><span style="color: Gray;">.</span><span style="color: Blue;">style</span><span style="color: Gray;">.</span><span style="color: Blue;">display</span><span style="color: Gray;"> = </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">block</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">else</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">csList</span><span style="color: Gray;">.</span><span style="color: Blue;">style</span><span style="color: Gray;">.</span><span style="color: Blue;">display</span><span style="color: Gray;"> = </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">none</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">optionList</span><span style="color: Gray;"> = </span><span style="color: Blue;">csList</span><span style="color: Gray;">.</span><span style="color: Blue;">getElementsByTagName</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">li</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">for</span><span style="color: Olive;">(</span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">i</span><span style="color: Gray;"> = </span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span><span style="color: Blue;">i</span><span style="color: Gray;"> &lt; </span><span style="color: Blue;">optionList</span><span style="color: Gray;">.</span><span style="color: Blue;">length</span><span style="color: Gray;">;</span><span style="color: Blue;">i</span><span style="color: Gray;">++</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">optionList</span><span style="color: Olive;">[</span><span style="color: Blue;">i</span><span style="color: Olive;">]</span><span style="color: Gray;">.</span><span style="color: Blue;">onclick</span><span style="color: Gray;"> = </span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">event</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">(</span><span style="color: Gray;">!</span><span style="color: Blue;">event</span><span style="color: Olive;">)</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">event</span><span style="color: Gray;"> = </span><span style="color: Teal;">window</span><span style="color: Gray;">.</span><span style="color: Blue;">event</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">el</span><span style="color: Gray;"> = </span><span style="color: Blue;">event</span><span style="color: Gray;">.</span><span style="color: Blue;">target</span><span style="color: Gray;"> || </span><span style="color: Blue;">event</span><span style="color: Gray;">.</span><span style="color: Blue;">srcElement</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">csContent</span><span style="color: Gray;"> = </span><span style="color: Blue;">el</span><span style="color: Gray;">.</span><span style="color: Blue;">innerHTML</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">selectHead</span><span style="color: Gray;">.</span><span style="color: Blue;">innerHTML</span><span style="color: Gray;"> = </span><span style="color: Blue;">csContent</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">csList</span><span style="color: Gray;">.</span><span style="color: Blue;">style</span><span style="color: Gray;">.</span><span style="color: Blue;">display</span><span style="color: Gray;"> = </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">none</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">optionList</span><span style="color: Olive;">[</span><span style="color: Blue;">i</span><span style="color: Olive;">]</span><span style="color: Gray;">.</span><span style="color: Blue;">onmouseover</span><span style="color: Gray;"> = </span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">event</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">(</span><span style="color: Gray;">!</span><span style="color: Blue;">event</span><span style="color: Olive;">)</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">event</span><span style="color: Gray;"> = </span><span style="color: Teal;">window</span><span style="color: Gray;">.</span><span style="color: Blue;">event</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">el</span><span style="color: Gray;"> = </span><span style="color: Blue;">event</span><span style="color: Gray;">.</span><span style="color: Blue;">target</span><span style="color: Gray;"> || </span><span style="color: Blue;">event</span><span style="color: Gray;">.</span><span style="color: Blue;">srcElement</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">addCss</span><span style="color: Olive;">(</span><span style="color: Blue;">el</span><span style="color: Gray;">,</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">onhover</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">optionList</span><span style="color: Olive;">[</span><span style="color: Blue;">i</span><span style="color: Olive;">]</span><span style="color: Gray;">.</span><span style="color: Blue;">onmouseout</span><span style="color: Gray;"> = </span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">event</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">(</span><span style="color: Gray;">!</span><span style="color: Blue;">event</span><span style="color: Olive;">)</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">event</span><span style="color: Gray;"> = </span><span style="color: Teal;">window</span><span style="color: Gray;">.</span><span style="color: Blue;">event</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">el</span><span style="color: Gray;"> = </span><span style="color: Blue;">event</span><span style="color: Gray;">.</span><span style="color: Blue;">target</span><span style="color: Gray;"> || </span><span style="color: Blue;">event</span><span style="color: Gray;">.</span><span style="color: Blue;">srcElement</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">removeCss</span><span style="color: Olive;">(</span><span style="color: Blue;">el</span><span style="color: Gray;">,</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">onhover</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">function</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">addCss</span><span style="color: Olive;">(</span><span style="color: Blue;">element</span><span style="color: Gray;">,</span><span style="color: Blue;">cssName</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">element</span><span style="color: Gray;">,</span><span style="color: Blue;">cssName</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">(</span><span style="color: Gray;">!</span><span style="color: Blue;">element</span><span style="color: Gray;">.</span><span style="color: Blue;">className</span><span style="color: Gray;"> || </span><span style="color: Blue;">element</span><span style="color: Gray;">.</span><span style="color: Blue;">className</span><span style="color: Gray;"> == </span><span style="color: Blue;">cssName</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">element</span><span style="color: Gray;">.</span><span style="color: Blue;">className</span><span style="color: Gray;"> = </span><span style="color: Blue;">cssName</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">else</span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">element</span><span style="color: Gray;">.</span><span style="color: Blue;">className</span><span style="color: Gray;"> = </span><span style="color: Blue;">element</span><span style="color: Gray;">.</span><span style="color: Blue;">className</span><span style="color: Gray;"> + </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">&nbsp;</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> + </span><span style="color: Blue;">cssName</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">function</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">removeCss</span><span style="color: Olive;">(</span><span style="color: Blue;">element</span><span style="color: Gray;">,</span><span style="color: Blue;">cssName</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">element</span><span style="color: Gray;">,</span><span style="color: Blue;">cssName</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">oldCss</span><span style="color: Gray;"> = </span><span style="color: Blue;">element</span><span style="color: Gray;">.</span><span style="color: Blue;">className</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">cssList</span><span style="color: Gray;"> = </span><span style="color: Blue;">oldCss</span><span style="color: Gray;">.</span><span style="color: Blue;">split</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;"> </span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">for</span><span style="color: Olive;">(</span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">i</span><span style="color: Gray;"> = </span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span><span style="color: Blue;">i</span><span style="color: Gray;"> &lt; </span><span style="color: Blue;">cssList</span><span style="color: Gray;">.</span><span style="color: Blue;">length</span><span style="color: Gray;">;</span><span style="color: Blue;">i</span><span style="color: Gray;">++</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">(</span><span style="color: Blue;">cssList</span><span style="color: Olive;">[</span><span style="color: Blue;">i</span><span style="color: Olive;">]</span><span style="color: Gray;"> == </span><span style="color: Blue;">cssName</span><span style="color: Olive;">)</span><span style="color: Gray;"> </span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">cssList</span><span style="color: Olive;">[</span><span style="color: Blue;">i</span><span style="color: Olive;">]</span><span style="color: Gray;"> = </span><span style="color: #8b0000;">&quot;&quot;</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">break</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">element</span><span style="color: Gray;">.</span><span style="color: Blue;">className</span><span style="color: Gray;"> = </span><span style="color: Blue;">cssList</span><span style="color: Gray;">.</span><span style="color: Blue;">join</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">&nbsp;</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Teal;">window</span><span style="color: Gray;">.</span><span style="color: Blue;">onload</span><span style="color: Gray;"> = </span><span style="color: Blue;">select</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&lt;</span><span style="color: #8b0000;">/</span><span style="color: Red;">script&gt;</span></li></ol></div>
<p><a href="http://www.eyike.com/blog/test/selected.html" target="new">查看效果</a></p>
<h3>相关文章</h3><ul class="related_post"><li><a href="http://www.eyike.com/blog/2008/07/23/shoujiliao4kuanfpsdazuo.html" title="收集了4款FPS大作">收集了4款FPS大作</a></li><li><a href="http://www.eyike.com/blog/2008/07/01/jsxuexibijixingweihejiegoudefenlisetintervaldeyingyong.html" title="js学习笔记：行为和结构的分离 setInterval的应用">js学习笔记：行为和结构的分离 setInterval的应用</a></li><li><a href="http://www.eyike.com/blog/2007/12/24/dianjizengjiashurukuang.html" title="点击增加输入框">点击增加输入框</a></li><li><a href="http://www.eyike.com/blog/2008/07/04/jsbijisetintervalheclearinterval.html" title="js笔记：setInterval和clearInterval">js笔记：setInterval和clearInterval</a></li><li><a href="http://www.eyike.com/blog/2007/11/28/ul.html" title="一个关于UL制作列表对齐的问题">一个关于UL制作列表对齐的问题</a></li><li><a href="http://www.eyike.com/blog/2008/08/31/2008nian8yue31saodaodebufenweizhuceshuangzijiepinyinyuming.html" title="2008年8月31扫到的部分未注册双字节拼音域名">2008年8月31扫到的部分未注册双字节拼音域名</a></li><li><a href="http://www.eyike.com/blog/2008/07/30/jsbijidongtaichuangjianhtmlneirong.html" title="js笔记：动态创建HTML内容">js笔记：动态创建HTML内容</a></li><li><a href="http://www.eyike.com/blog/2007/12/06/chuxiejsyigeanshiqixianshibutongneirongdexiaoguo.html" title="初写JS，一个按时期显示不同内容的效果">初写JS，一个按时期显示不同内容的效果</a></li><li><a href="http://www.eyike.com/blog/2008/07/31/jsbijidongtaichuangjianhtmlneironggaijinban.html" title="js笔记：动态创建HTML内容[改进版]">js笔记：动态创建HTML内容[改进版]</a></li><li><a href="http://www.eyike.com/blog/2007/12/04/safari.html" title="看来Safari更标准">看来Safari更标准</a></li><li><a href="http://www.eyike.com/blog/2007/12/21/firefoxxiadeyingwenqiangzhiduanxing.html" title="firefox下的英文强制断行">firefox下的英文强制断行</a></li><li><a href="http://www.eyike.com/blog/2007/12/06/xiuliaoanshijianxianshibutongneirongdexiaoguodedaima.html" title="修了按时间显示不同内容的效果的代码">修了按时间显示不同内容的效果的代码</a></li><li><a href="http://www.eyike.com/blog/2008/07/02/jsxuexibijisetintervaldeshenrulijie.html" title="js学习笔记：setInterval()的进一步理解">js学习笔记：setInterval()的进一步理解</a></li><li><a href="http://www.eyike.com/blog/2008/09/18/jigechangyongdefangfa.html" title="几个常用的方法">几个常用的方法</a></li><li><a href="http://www.eyike.com/blog/2008/09/23/jsbijigouzaohanshuleileishuxingleifangfa.html" title="JS笔记：构造函数，类，类属性，类方法">JS笔记：构造函数，类，类属性，类方法</a></li><li><a href="http://www.eyike.com/blog/2008/07/31/jsxuexibijidianjilunhuan.html" title="js笔记：点击轮换">js笔记：点击轮换</a></li><li><a href="http://www.eyike.com/blog/2008/10/01/shiyijingdongxing.html" title="十一京东行">十一京东行</a></li><li><a href="http://www.eyike.com/blog/2007/11/30/%e4%b9%9d%e4%b9%9d%e4%b9%98%e6%b3%95%e8%a1%a8.html" title="九九乘法表">九九乘法表</a></li><li><a href="http://www.eyike.com/blog/2008/07/16/jsbijiyigetishigensuishubiaodexiaoguo.html" title="js笔记：一个提示跟随鼠标的效果">js笔记：一个提示跟随鼠标的效果</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.eyike.com/blog/2008/08/04/jsbijimonixialaliebiao.html/feed</wfw:commentRss>
		</item>
		<item>
		<title>js笔记：点击轮换</title>
		<link>http://www.eyike.com/blog/2008/07/31/jsxuexibijidianjilunhuan.html</link>
		<comments>http://www.eyike.com/blog/2008/07/31/jsxuexibijidianjilunhuan.html#comments</comments>
		<pubDate>Thu, 31 Jul 2008 05:31:26 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[js笔记]]></category>

		<category><![CDATA[firstChild]]></category>

		<category><![CDATA[javascript]]></category>

		<category><![CDATA[lastChild]]></category>

		<category><![CDATA[previousSibling]]></category>

		<guid isPermaLink="false">http://www.eyike.com/blog/?p=46</guid>
		<description><![CDATA[html部分：
&#60;body&#62;
&#160; &#160; &#60;div&#160;id=&#34;wrapper&#34;&#62;
&#160; &#160; &#160; &#160; &#60;div&#160;id=&#34;left&#34; class=&#34;c&#34;&#62;&#60;div&#62;&#60;/div&#62;&#60;/div&#62;
&#160; &#160; &#160; &#160; &#60;div&#160;id=&#34;center&#34; class=&#34;c&#34;&#62;&#60;/div&#62;
&#160; &#160; &#160; &#160; &#60;div&#160;id=&#34;right&#34; class=&#34;c&#34;&#62;&#60;/div&#62;
&#160; &#160; &#60;div&#160;id=&#34;dd&#34; class=&#34;c&#34;&#62;&#60;div&#62;&#60;div style=&#34;width:100%;height:400px;background:#fff;&#34;&#62;&#60;/div&#62;&#60;/div&#62;&#60;/div&#62;
&#160; &#160; &#60;/div&#62;
&#60;/body&#62;
css部分：
*{padding:0;margin:0;}
body{width:1003px;overflow-x:hidden;background:#fff;margin:0&#160;auto;}
#wrapper{width:1003px;overflow:hidden;height:800px;position:relative;}
#left{background:#ccc;}
#center{background:#f60;}
#right{background:#333;}
#dd{background:#000;left:0;}
.c{position:absolute;width:1003px;left:-1003px;top:0;height:600px;cursor:pointer;}
jsvascript部分：
&#60;script type=&#34;text/javascript&#34;&#62;
&#160; &#160; function&#160;move(){
&#160; &#160; &#160; &#160; var&#160;divTag = document.getElementById(&#34;wrapper&#34;).getElementsByTagName(&#34;div&#34;);//取得需要轮播的DIV
&#160; &#160; &#160; &#160; var&#160;divWidth = 1003;//定义轮播宽度
&#160; &#160; &#160; &#160; //遍历需要轮播的DIV
&#160; &#160; &#160; &#160; for(var&#160;i = 0;i &#60; divTag.length;i++){
&#160; &#160; &#160; &#160; &#160; [...]]]></description>
			<content:encoded><![CDATA[<p>html部分：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Olive;">&lt;</span><span style="color: Green;">body</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">div</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">wrapper</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">div</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">left</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">c</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;&lt;</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">div</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">center</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">c</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">div</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">right</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">c</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">div</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">dd</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">c</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;&lt;</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;&lt;</span><span style="color: Green;">div</span><span style="color: Gray;"> </span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">width:100%;height:400px;background:#fff;</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: Green;">body</span><span style="color: Olive;">&gt;</span></li></ol></div>
<p>css部分：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Blue;">*</span><span style="color: Olive;">{</span><span style="color: Green;">padding:</span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span><span style="color: Green;">margin:</span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span><span style="color: Olive;">}</span></li>
<li><span style="color: Blue;">body</span><span style="color: Olive;">{</span><span style="color: Green;">width:</span><span style="color: Maroon;">1003</span><span style="color: Red;">px</span><span style="color: Gray;">;</span><span style="color: Green;">overflow-x:</span><span style="color: Red;">hidden</span><span style="color: Gray;">;</span><span style="color: Green;">background:</span><span style="color: #00008b;">#fff</span><span style="color: Gray;">;</span><span style="color: Green;">margin:</span><span style="color: Maroon;">0</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">auto</span><span style="color: Gray;">;</span><span style="color: Olive;">}</span></li>
<li><span style="color: Blue;">#wrapper</span><span style="color: Olive;">{</span><span style="color: Green;">width:</span><span style="color: Maroon;">1003</span><span style="color: Red;">px</span><span style="color: Gray;">;</span><span style="color: Green;">overflow:</span><span style="color: Red;">hidden</span><span style="color: Gray;">;</span><span style="color: Green;">height:</span><span style="color: Maroon;">800</span><span style="color: Red;">px</span><span style="color: Gray;">;</span><span style="color: Green;">position:</span><span style="color: Red;">relative</span><span style="color: Gray;">;</span><span style="color: Olive;">}</span></li>
<li><span style="color: Blue;">#left</span><span style="color: Olive;">{</span><span style="color: Green;">background:</span><span style="color: #00008b;">#ccc</span><span style="color: Gray;">;</span><span style="color: Olive;">}</span></li>
<li><span style="color: Blue;">#center</span><span style="color: Olive;">{</span><span style="color: Green;">background:</span><span style="color: #00008b;">#f60</span><span style="color: Gray;">;</span><span style="color: Olive;">}</span></li>
<li><span style="color: Blue;">#right</span><span style="color: Olive;">{</span><span style="color: Green;">background:</span><span style="color: #00008b;">#333</span><span style="color: Gray;">;</span><span style="color: Olive;">}</span></li>
<li><span style="color: Blue;">#dd</span><span style="color: Olive;">{</span><span style="color: Green;">background:</span><span style="color: #00008b;">#000</span><span style="color: Gray;">;</span><span style="color: Green;">left:</span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span><span style="color: Olive;">}</span></li>
<li><span style="color: Blue;">.c</span><span style="color: Olive;">{</span><span style="color: Green;">position:</span><span style="color: Red;">absolute</span><span style="color: Gray;">;</span><span style="color: Green;">width:</span><span style="color: Maroon;">1003</span><span style="color: Red;">px</span><span style="color: Gray;">;</span><span style="color: Green;">left:</span><span style="color: Gray;">-</span><span style="color: Maroon;">1003</span><span style="color: Red;">px</span><span style="color: Gray;">;</span><span style="color: Green;">top:</span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span><span style="color: Green;">height:</span><span style="color: Maroon;">600</span><span style="color: Red;">px</span><span style="color: Gray;">;</span><span style="color: Green;">cursor:</span><span style="color: Red;">pointer</span><span style="color: Gray;">;</span><span style="color: Olive;">}</span></li></ol></div>
<p>jsvascript部分：</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Gray;">&lt;</span><span style="color: Blue;">script</span><span style="color: Gray;"> </span><span style="color: Blue;">type</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">text/javascript</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">function</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">move</span><span style="color: Olive;">(){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">divTag</span><span style="color: Gray;"> = </span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: Blue;">getElementById</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">wrapper</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: Blue;">getElementsByTagName</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">div</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span><span style="color: #ffa500;">//取得需要轮播的DIV</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">divWidth</span><span style="color: Gray;"> = </span><span style="color: Maroon;">1003</span><span style="color: Gray;">;</span><span style="color: #ffa500;">//定义轮播宽度</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">//遍历需要轮播的DIV</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">for</span><span style="color: Olive;">(</span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">i</span><span style="color: Gray;"> = </span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span><span style="color: Blue;">i</span><span style="color: Gray;"> &lt; </span><span style="color: Blue;">divTag</span><span style="color: Gray;">.</span><span style="color: Blue;">length</span><span style="color: Gray;">;</span><span style="color: Blue;">i</span><span style="color: Gray;">++</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">//只有class=c的DIV开始轮播</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: Blue;">divTag</span><span style="color: Olive;">[</span><span style="color: Blue;">i</span><span style="color: Olive;">]</span><span style="color: Gray;">.</span><span style="color: Blue;">className</span><span style="color: Gray;"> == </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">c</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">bb</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">cc</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">//点击开始</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">divTag</span><span style="color: Olive;">[</span><span style="color: Blue;">i</span><span style="color: Olive;">]</span><span style="color: Gray;">.</span><span style="color: Blue;">onclick</span><span style="color: Gray;"> = </span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">event</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: Gray;">!</span><span style="color: Blue;">event</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">event</span><span style="color: Gray;"> = </span><span style="color: Teal;">window</span><span style="color: Gray;">.</span><span style="color: Blue;">event</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">el</span><span style="color: Gray;"> = </span><span style="color: Blue;">event</span><span style="color: Gray;">.</span><span style="color: Blue;">target</span><span style="color: Gray;"> || </span><span style="color: Blue;">event</span><span style="color: Gray;">.</span><span style="color: Blue;">srcElement</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">//如果当前点击的元素不是需要轮播的DIV，则寻找它的父节点，直到找到需要轮播的元素</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">while</span><span style="color: Olive;">(</span><span style="color: Blue;">el</span><span style="color: Gray;">.</span><span style="color: Blue;">className</span><span style="color: Gray;"> != </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">c</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">el</span><span style="color: Gray;"> = </span><span style="color: Blue;">el</span><span style="color: Gray;">.</span><span style="color: Blue;">parentNode</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">firstDiv</span><span style="color: Gray;"> = </span><span style="color: Blue;">el</span><span style="color: Gray;">.</span><span style="color: Blue;">parentNode</span><span style="color: Gray;">.</span><span style="color: Blue;">firstChild</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">//查找轮播元素的父级节点的第一个子节点</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: Blue;">firstDiv</span><span style="color: Gray;">.</span><span style="color: Blue;">nodeType</span><span style="color: Gray;"> == </span><span style="color: Maroon;">3</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">firstDiv</span><span style="color: Gray;"> = </span><span style="color: Blue;">firstDiv</span><span style="color: Gray;">.</span><span style="color: Blue;">nextSibling</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">//如果当前点击的不是第一个子节点，开始轮播</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: Blue;">firstDiv</span><span style="color: Gray;"> != </span><span style="color: Blue;">el</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">//查找当前节点的上一个相邻节点</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">preTag</span><span style="color: Gray;"> = </span><span style="color: Blue;">el</span><span style="color: Gray;">.</span><span style="color: Blue;">previousSibling</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: Blue;">preTag</span><span style="color: Gray;">.</span><span style="color: Blue;">nodeType</span><span style="color: Gray;"> == </span><span style="color: Maroon;">3</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">preTag</span><span style="color: Gray;"> = </span><span style="color: Blue;">preTag</span><span style="color: Gray;">.</span><span style="color: Blue;">previousSibling</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">n</span><span style="color: Gray;"> = </span><span style="color: Blue;">el</span><span style="color: Gray;">.</span><span style="color: Blue;">offsetLeft</span><span style="color: Gray;">;</span><span style="color: #ffa500;">//取得左边距的值</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">k</span><span style="color: Gray;"> = </span><span style="color: Blue;">preTag</span><span style="color: Gray;">.</span><span style="color: Blue;">offsetLeft</span><span style="color: Gray;">;</span><span style="color: #ffa500;">//取得相邻节点的左边距的值</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">//当前元素和相邻元素的left值每20毫秒减小100像素</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">bb</span><span style="color: Gray;"> = </span><span style="color: Blue;">setInterval</span><span style="color: Olive;">(</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">function</span><span style="color: Olive;">(){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: Blue;">n</span><span style="color: Gray;"> &lt; </span><span style="color: Blue;">divWidth</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">el</span><span style="color: Gray;">.</span><span style="color: Blue;">style</span><span style="color: Gray;">.</span><span style="color: Blue;">left</span><span style="color: Gray;"> = </span><span style="color: Blue;">n</span><span style="color: Gray;"> + </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">px</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">preTag</span><span style="color: Gray;">.</span><span style="color: Blue;">style</span><span style="color: Gray;">.</span><span style="color: Blue;">left</span><span style="color: Gray;"> = </span><span style="color: Blue;">k</span><span style="color: Gray;"> + </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">px</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">n</span><span style="color: Gray;"> = </span><span style="color: Blue;">n</span><span style="color: Gray;"> + </span><span style="color: Maroon;">100</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">k</span><span style="color: Gray;"> = </span><span style="color: Blue;">k</span><span style="color: Gray;"> + </span><span style="color: Maroon;">100</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">el</span><span style="color: Gray;">.</span><span style="color: Blue;">setAttribute</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">class</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">,</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">c</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">preTag</span><span style="color: Gray;">.</span><span style="color: Blue;">setAttribute</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">class</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">,</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">c</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Green;">else</span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">el</span><span style="color: Gray;">.</span><span style="color: Blue;">style</span><span style="color: Gray;">.</span><span style="color: Blue;">left</span><span style="color: Gray;"> = </span><span style="color: Blue;">divWidth</span><span style="color: Gray;"> + </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">px</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">preTag</span><span style="color: Gray;">.</span><span style="color: Blue;">style</span><span style="color: Gray;">.</span><span style="color: Blue;">left</span><span style="color: Gray;"> = </span><span style="color: Maroon;">0</span><span style="color: Gray;"> + </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">px</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Teal;">window</span><span style="color: Gray;">.</span><span style="color: Blue;">clearInterval</span><span style="color: Olive;">(</span><span style="color: Blue;">bb</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">,</span><span style="color: Maroon;">20</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">//如果当前点击元素是第一个子节点，则复原成初始状态</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">else</span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">child</span><span style="color: Gray;"> = </span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: Blue;">getElementById</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">wrapper</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: Blue;">childNodes</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">last</span><span style="color: Gray;"> = </span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: Blue;">getElementById</span><span style="color: Olive;">(</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">wrapper</span><span style="color: #8b0000;">&quot;</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: Blue;">lastChild</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: Blue;">last</span><span style="color: Gray;">.</span><span style="color: Blue;">nodeType</span><span style="color: Gray;"> == </span><span style="color: Maroon;">3</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">last</span><span style="color: Gray;"> = </span><span style="color: Blue;">last</span><span style="color: Gray;">.</span><span style="color: Blue;">previousSibling</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">t</span><span style="color: Gray;"> = </span><span style="color: Blue;">last</span><span style="color: Gray;">.</span><span style="color: Blue;">offsetLeft</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">y</span><span style="color: Gray;"> = </span><span style="color: Blue;">el</span><span style="color: Gray;">.</span><span style="color: Blue;">offsetLeft</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">for</span><span style="color: Olive;">(</span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">m</span><span style="color: Gray;"> = </span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span><span style="color: Blue;">m</span><span style="color: Gray;"> &lt; </span><span style="color: Blue;">child</span><span style="color: Gray;">.</span><span style="color: Blue;">length</span><span style="color: Gray;">;</span><span style="color: Blue;">m</span><span style="color: Gray;">++</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: Blue;">child</span><span style="color: Olive;">[</span><span style="color: Blue;">m</span><span style="color: Olive;">]</span><span style="color: Gray;">.</span><span style="color: Blue;">nodeType</span><span style="color: Gray;"> != </span><span style="color: Maroon;">3</span><span style="color: Gray;"> &amp;&amp; </span><span style="color: Blue;">child</span><span style="color: Olive;">[</span><span style="color: Blue;">m</span><span style="color: Olive;">]</span><span style="color: Gray;"> != </span><span style="color: Blue;">last</span><span style="color: Gray;"> &amp;&amp; </span><span style="color: Blue;">child</span><span style="color: Olive;">[</span><span style="color: Blue;">m</span><span style="color: Olive;">]</span><span style="color: Gray;"> != </span><span style="color: Blue;">el</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">child</span><span style="color: Olive;">[</span><span style="color: Blue;">m</span><span style="color: Olive;">]</span><span style="color: Gray;">.</span><span style="color: Blue;">style</span><span style="color: Gray;">.</span><span style="color: Blue;">left</span><span style="color: Gray;"> = -</span><span style="color: Blue;">divWidth</span><span style="color: Gray;"> + </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">px</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">cc</span><span style="color: Gray;"> = </span><span style="color: Blue;">setInterval</span><span style="color: Olive;">(</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">function</span><span style="color: Olive;">(){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: Blue;">t</span><span style="color: Gray;"> &gt; </span><span style="color: Maroon;">0</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">last</span><span style="color: Gray;">.</span><span style="color: Blue;">style</span><span style="color: Gray;">.</span><span style="color: Blue;">left</span><span style="color: Gray;"> = </span><span style="color: Blue;">t</span><span style="color: Gray;"> + </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">px</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">el</span><span style="color: Gray;">.</span><span style="color: Blue;">style</span><span style="color: Gray;">.</span><span style="color: Blue;">left</span><span style="color: Gray;"> = </span><span style="color: Blue;">y</span><span style="color: Gray;"> + </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">px</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">t</span><span style="color: Gray;"> = </span><span style="color: Blue;">t</span><span style="color: Gray;"> - </span><span style="color: Maroon;">100</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">y</span><span style="color: Gray;"> = </span><span style="color: Blue;">y</span><span style="color: Gray;"> - </span><span style="color: Maroon;">100</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">else</span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">last</span><span style="color: Gray;">.</span><span style="color: Blue;">style</span><span style="color: Gray;">.</span><span style="color: Blue;">left</span><span style="color: Gray;"> = </span><span style="color: Maroon;">0</span><span style="color: Gray;"> + </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">px</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">el</span><span style="color: Gray;">.</span><span style="color: Blue;">style</span><span style="color: Gray;">.</span><span style="color: Blue;">left</span><span style="color: Gray;"> = -</span><span style="color: Blue;">divWidth</span><span style="color: Gray;"> + </span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">px</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Teal;">window</span><span style="color: Gray;">.</span><span style="color: Blue;">clearInterval</span><span style="color: Olive;">(</span><span style="color: Blue;">cc</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">,</span><span style="color: Maroon;">20</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">)</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Teal;">window</span><span style="color: Gray;">.</span><span style="color: Blue;">onload</span><span style="color: Gray;"> = </span><span style="color: Blue;">move</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &lt;</span><span style="color: #8b0000;">/</span><span style="color: Red;">script&gt;</span></li></ol></div>
<p><a href="http://www.eyike.com/blog/test/move.html" target="new">查看效果</a></p>
<h3>相关文章</h3><ul class="related_post"><li><a href="http://www.eyike.com/blog/2008/09/23/jsbijigouzaohanshuleileishuxingleifangfa.html" title="JS笔记：构造函数，类，类属性，类方法">JS笔记：构造函数，类，类属性，类方法</a></li><li><a href="http://www.eyike.com/blog/2008/09/18/jigechangyongdefangfa.html" title="几个常用的方法">几个常用的方法</a></li><li><a href="http://www.eyike.com/blog/2008/07/31/jsbijidongtaichuangjianhtmlneironggaijinban.html" title="js笔记：动态创建HTML内容[改进版]">js笔记：动态创建HTML内容[改进版]</a></li><li><a href="http://www.eyike.com/blog/2008/07/30/jsbijidongtaichuangjianhtmlneirong.html" title="js笔记：动态创建HTML内容">js笔记：动态创建HTML内容</a></li><li><a href="http://www.eyike.com/blog/2008/07/16/jsbijiyigetishigensuishubiaodexiaoguo.html" title="js笔记：一个提示跟随鼠标的效果">js笔记：一个提示跟随鼠标的效果</a></li><li><a href="http://www.eyike.com/blog/2007/12/24/dianjizengjiashurukuang.html" title="点击增加输入框">点击增加输入框</a></li><li><a href="http://www.eyike.com/blog/2007/12/21/firefoxxiadeyingwenqiangzhiduanxing.html" title="firefox下的英文强制断行">firefox下的英文强制断行</a></li><li><a href="http://www.eyike.com/blog/2007/12/06/xiuliaoanshijianxianshibutongneirongdexiaoguodedaima.html" title="修了按时间显示不同内容的效果的代码">修了按时间显示不同内容的效果的代码</a></li><li><a href="http://www.eyike.com/blog/2007/12/06/chuxiejsyigeanshiqixianshibutongneirongdexiaoguo.html" title="初写JS，一个按时期显示不同内容的效果">初写JS，一个按时期显示不同内容的效果</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.eyike.com/blog/2008/07/31/jsxuexibijidianjilunhuan.html/feed</wfw:commentRss>
		</item>
		<item>
		<title>js笔记：动态创建HTML内容[改进版]</title>
		<link>http://www.eyike.com/blog/2008/07/31/jsbijidongtaichuangjianhtmlneironggaijinban.html</link>
		<comments>http://www.eyike.com/blog/2008/07/31/jsbijidongtaichuangjianhtmlneironggaijinban.html#comments</comments>
		<pubDate>Thu, 31 Jul 2008 03:20:41 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[js笔记]]></category>

		<category><![CDATA[javascript]]></category>

		<category><![CDATA[动态创建HTML]]></category>

		<guid isPermaLink="false">http://www.eyike.com/blog/?p=43</guid>
		<description><![CDATA[点击当前菜单时隐藏其他子菜单
&#60;script type=&#34;text/javascript&#34;&#62;
&#160; &#160; &#160; &#160; function&#160;insertAfter(newElement,targetElement){
&#160; &#160; &#160; &#160; &#160; &#160; var&#160;parent = targetElement.parentNode;
&#160; &#160; &#160; &#160; &#160; &#160; if(parent.lastChild == targetElement){
&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; parent.appendChild(newElement);
&#160; &#160; &#160; &#160; &#160; &#160; }else{
&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; parent.insertBefore(newElement,targetElement.nextSibling);
&#160; &#160; &#160; &#160; &#160; &#160; }
&#160; &#160; &#160; &#160; }
&#160; &#160; [...]]]></description>
			<content:encoded><![CDATA[<p>点击当前菜单时隐藏其他子菜单</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Gray;">&lt;</span><span style="color: Blue;">script</span><span style="color: Gray;"> </span><span style="color: Blue;">type</span><span style="color: Gray;">=</span><span style="color: #8b0000;">&quot;</span><span style="color: Red;">text/javascript</span><span style="color: #8b0000;">&quot;</span><span style="color: Gray;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">function</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">insertAfter</span><span style="color: Olive;">(</span><span style="color: Blue;">newElement</span><span style="color: Gray;">,</span><span style="color: Blue;">targetElement</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">parent</span><span style="color: Gray;"> = </span><span style="color: Blue;">targetElement</span><span style="color: Gray;">.</span><span style="color: Blue;">parentNode</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: Blue;">parent</span><span style="color: Gray;">.</span><span style="color: Blue;">lastChild</span><span style="color: Gray;"> == </span><span style="color: Blue;">targetElement</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">parent</span><span style="color: Gray;">.</span><span style="color: Blue;">appendChild</span><span style="color: Olive;">(</span><span style="color: Blue;">newElement</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Green;">else</span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span