<?xml version="1.0" encoding="UTF-8"?>
  <feed xmlns="http://www.w3.org/2005/Atom">
  <title type="html"><![CDATA[前端开发]]></title>
  <subtitle type="html"><![CDATA[XHTML CSS JAVAScri&#112;t  前端开发]]></subtitle>
  <id>http://www.wxwdesign.cn/</id>
  <link rel="alternate" type="text/html" href="http://www.wxwdesign.cn/" /> 
  <link rel="self" type="application/atom+xml" href="http://www.wxwdesign.cn/atom.asp" /> 
  <generator uri="http://www.pjhome.net/" version="2.8">PJBlog3</generator> 
  <updated>2010-03-10T14:47:32+08:00</updated>

  <entry>
	  <title type="html"><![CDATA[分享一个3D桌面软件BumpTop]]></title>
	  <author>
		 <name>admin</name>
		 <uri>http://www.wxwdesign.cn/</uri>
		 <email>wxwdesign.cn</email>
	  </author>
	  <category term="" scheme="http://www.wxwdesign.cn/default.asp?cateID=7" label="Multimedia" /> 
	  <updated>2010-03-10T14:47:32+08:00</updated>
	  <published>2010-03-10T14:47:32+08:00</published>
		  <summary type="html"><![CDATA[<p><img alt="" src="http://www.wxwdesign.cn/attachments/month_1003/d2010310155435.jpg" /></p>
<p>&nbsp;</p>
<p><img alt="" src="http://www.wxwdesign.cn/attachments/month_1003/h201031016510.jpg" /></p>
<p>&nbsp;</p>
<p><strong>使用效果截图：</strong></p>
<p>&nbsp;</p>
<p><embed menu="true" loop="true" play="true" type="application/x-shockwave-flash" src="http://player.youku.com/player.php/sid/27220235/v.swf" width="550" height="450"></embed></p>
<p>&nbsp;</p>
<p><a target="_blank" href="http://down.tech.sina.com.cn/content/43262.html">下载地址</a></p>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.wxwdesign.cn/article/multimedia/3d_desk_bumptop.htm" /> 
	  <id>http://www.wxwdesign.cn/default.asp?id=458</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[css_sel&#101;ction改变文字反选的背景颜色]]></title>
	  <author>
		 <name>admin</name>
		 <uri>http://www.wxwdesign.cn/</uri>
		 <email>wxwdesign.cn</email>
	  </author>
	  <category term="" scheme="http://www.wxwdesign.cn/default.asp?cateID=9" label="CSS+JS+XHTML" /> 
	  <updated>2010-02-21T15:46:23+08:00</updated>
	  <published>2010-02-21T15:46:23+08:00</published>
		  <summary type="html"><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp;在计算机操作中经常会有反选出现，系统一般会根据选择区域的颜色，显示出补色。但windows默认的文字选择时，背景为蓝色，前景色为白色，如果背景是深色，则文字为蓝色，背景变成白色。如下图所示：<br/><br/><img src="http://www.wxwdesign.cn/attachments/month_1002/b201022115279.gif" border="0" alt=""/><br/><strong>反选后默认的样式</strong><br/><br/>&nbsp;&nbsp;&nbsp;&nbsp; 能不能改变选择的默认颜色呢，也许很多人对这个问题不是很在意，也可能你早就见到过这个效果了，但是却忽略了。<a target="_blank" href="http://www.quirksmode.org/css/sel&#101;ction.html" rel="external">查看示例</a><span style="color:Teal">(请在非IE浏览器下查看)</span><br/><br/>&nbsp;&nbsp;&nbsp;&nbsp; 从博客里可以看到PPK给出了如下的CSS代码：<br/><br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">::-moz-sel&#101;ction{&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:Teal">/*针对Firefox*/</span><br/>&#160;&#160;&#160;&#160;background:#cc0000;<br/>&#160;&#160;&#160;&#160;color:#fff;<br/>}<br/><br/>::sel&#101;ction {<br/>&#160;&#160;&#160;&#160;background:#cc0000;<br/>&#160;&#160;&#160;&#160;color:#fff;<br/>}<br/><br/>code::-moz-sel&#101;ction {&nbsp;&nbsp;<span style="color:Teal">/*code是标签选择器，可以换成p或span等*/</span><br/>&#160;&#160;&#160;&#160;background: #333333;<br/>}<br/><br/>code::sel&#101;ction {<br/>&#160;&#160;&#160;&#160;background: #333333;<br/>}</div></div><br/><br/>通过以上代码可以看出，你完全可以给不同的容器定义不同的反选背景颜色，下面给出一个示例：<br/><br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp52489"><!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>&#34;>
<html xmlns=&#34;<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>&#34;>
<head>
<meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; />
<style type=&#34;text/css&#34; media=&#34;screen&#34;>
body{ font-size:14px; font-family:Tahoma, &#34;宋体&#34;, &#34;微软雅黑&#34;, Arial, MingLiU; margin:0px; padding:0px; line-height:22px;}
div,p,ul{ margin:9px auto; width:600px; padding:0px;}
ul{ list-style:none;}
div::sel&#101;ction{ color:#FFFF99; background:#7D0000;}
div::-moz-sel&#101;ction{ color:#FFFF99; background:#7D0000;}
p::sel&#101;ction{ color:#FFFFFF; background:#FF0000;}
p::-moz-sel&#101;ction{ color:#FFFFFF; background:#FF0000;}
</style>
<title>CSS_sel&#101;ction测试-----wxwdesign.cn</title>
</head>

<body>
<ul>
   <li>1. 普通文本，反选采用默认颜色。</li>
   <li>2. 如果要查看下面的效果，请使用非IE浏览器。</li>
</ul>
<div>这里是div的内容，反选查看效果。</div>
<p>这里是p的内容，反选查看效果。</p>
</body>
</html></TEXTAREA><br/><INPUT onclick="runEx('temp52489')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp52489')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp52489')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.wxwdesign.cn/article/skills/css_selection_background_color.htm" /> 
	  <id>http://www.wxwdesign.cn/default.asp?id=457</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[一些不太常用的html标签及语义化]]></title>
	  <author>
		 <name>admin</name>
		 <uri>http://www.wxwdesign.cn/</uri>
		 <email>wxwdesign.cn</email>
	  </author>
	  <category term="" scheme="http://www.wxwdesign.cn/default.asp?cateID=9" label="CSS+JS+XHTML" /> 
	  <updated>2010-02-20T15:49:12+08:00</updated>
	  <published>2010-02-20T15:49:12+08:00</published>
		  <summary type="html"><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 在不考虑结构合理性和html语义化之前，body部分你可以全部用div配合CSS写下来，通过对div样式的控制，完全可以做出看起来很漂亮的页面，这对于普通的浏览者来说，完全已经足够了。但对于一个开发页面的人来说，远远不够，没有合理的结构和语义化，不但给开发和维护带来麻烦，而且对于搜索引擎来说，同样很糟糕。一个结构合理的页面要比“纯div”页面坚固很多，即使裸奔了，她仍然很耐看。<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;很多html标签长久不用，写代码的时候可能会忽略它，但如果使用了这些标签，代码一下子会漂亮不少。大致把这些标签汇总一下，以备参考。<br/><br/><strong>标签列表：</strong><br/>&lt;abbr&gt; &lt;acronym&gt; &lt;address&gt; &lt;bdo&gt; &lt;blockquote&gt; &lt;caption&gt; &lt;cite&gt; &lt;code&gt; &lt;del&gt; &lt;dfn&gt; &lt;em&gt; &lt;fieldset&gt; &lt;ins&gt; &lt;kbd&gt; &lt;legend&gt; &lt;noscript&gt; &lt;optgroup&gt; &lt;pre&gt; &lt;q&gt; &lt;samp&gt; &lt;sub&gt; &lt;sup&gt; &lt;tfoot&gt; &lt;thead&gt; &lt;var&gt; <br/><br/><strong><span style="color:Teal">1. &lt;abbr&gt;</span></strong><br/>表示一个缩写形式，比如 &#34;Inc.&#34;、&#34;etc.&#34;。通过对缩写词语进行标记，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。有些浏览器在鼠标经过时会显示title效果。<br/><br/>示例：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp77347"><abbr title=&#34;incorporated&#34;>Inc.</abbr></TEXTAREA><br/><INPUT onclick="runEx('temp77347')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp77347')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp77347')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><strong><span style="color:Teal">2.&lt;acronym&gt;</span></strong><br/>&lt;acronym&gt; 元素可定义只取首字母缩写，比如 &#34;NATO&#34;。通过对只取首字母缩写进行标记，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。<br/><br/>示例：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp16059"><acronym title=&#34;World Wide Web&#34;>WWW</acronym></TEXTAREA><br/><INPUT onclick="runEx('temp16059')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp16059')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp16059')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><strong><span style="color:Teal">3.&lt;address&gt;</span></strong><br/>&lt;address&gt; 可定义一个地址（比如电子邮件地址）。您应当使用它来定义地址、签名或者文档的作者身份。<br/><br/>示例：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp53039">联系地址：<br /><address>
  <a href=&#34;mailto:admin@admin.com&#34;>EMAIL</a><br />
  中国广州 xx路 xx号<br />
</address></TEXTAREA><br/><INPUT onclick="runEx('temp53039')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp53039')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp53039')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><strong><span style="color:Teal">4.&lt;bdo&gt;</span></strong><br/>bdo 元素可覆盖默认的文本方向。<br/><br/>示例：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp42099"><bdo dir=&#34;rtl&#34;>
这里是测试文本
</bdo></TEXTAREA><br/><INPUT onclick="runEx('temp42099')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp42099')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp42099')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><strong><span style="color:Teal">5.&lt;blockquote&gt;</span></strong><br/>&lt;blockquote&gt; 标签可定义一个块引用。与之相类似的是&lt;q&gt;，&lt;q&gt;是短引用。<br/><br/>&lt;blockquote&gt; 与 &lt;/blockquote&gt; 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。<br/><br/>示例：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp21804">为了让人们懂得珍惜粮食，常常会引用这首诗：<blockquote>锄禾日当午，汗滴禾下土。谁念盘中餐，粒粒皆辛苦。</blockquote></TEXTAREA><br/><INPUT onclick="runEx('temp21804')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp21804')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp21804')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><strong><span style="color:Teal">6.&lt;caption&gt;</span></strong><br/>caption 元素定义表格标题。<br/><br/>caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。<br/><br/>示例：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp82688"><table border=&#34;1&#34;>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table></TEXTAREA><br/><INPUT onclick="runEx('temp82688')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp82688')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp82688')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><strong><span style="color:Teal">7.&lt;cite&gt;</span></strong><br/>&lt;cite&gt; 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。<br/><br/>示例：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp37">前端开发入门书籍：<cite>《JavaScript DOM编程艺术》</cite></TEXTAREA><br/><INPUT onclick="runEx('temp37')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp37')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp37')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><strong><span style="color:Teal">8.&lt;code&gt;</span></strong><br/>&lt;code&gt; 标签用于表示计算机源代码或者其他机器可以阅读的文本内容。<br/><br/>示例：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp1105"><code><var>var  a=2,b;</var>b=a*2;</code></TEXTAREA><br/><INPUT onclick="runEx('temp1105')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp1105')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp1105')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><strong><span style="color:Teal">9.&lt;del&gt;</span></strong><br/>定义文档中已被删除的文本。常与&lt;ins&gt;标签配合使用，来描述文档中的更新和修正。<br/><br/>示例：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp97901">a dozen is <del>20</del> 12 pieces</TEXTAREA><br/><INPUT onclick="runEx('temp97901')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp97901')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp97901')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/>示例二：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp7514"><p>
一打有
<del>二十</del> 
<ins>十二</ins> 
件。
</p></TEXTAREA><br/><INPUT onclick="runEx('temp7514')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp7514')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp7514')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><strong><span style="color:Teal">10.&lt;dfn&gt;</span></strong><br/>&lt;dfn&gt; 标签可标记那些对特殊术语或短语的定义。<br/><br/>&lt;dfn&gt; 标签尽量少用为妙。作为一种通用样式，尤其在技术文档中，当第一次新的术语时，应该将它们与普通文本分开，这样读者可以更好地理解文章当前的主题，而从那以后就不要再对这个术语进行任何标记了。<br/><br/><strong><span style="color:Teal">11.&lt;em&gt;</span></strong><br/>&lt;em&gt; 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。<br/><br/>&lt;em&gt;标签也不能被滥用，用的太多了，就没有强调的重点了。<br/><br/>示例：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp78675">前端开发需要学习的内容：<em>(x)html,CSS,javascript,Ajax...</em></TEXTAREA><br/><INPUT onclick="runEx('temp78675')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp78675')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp78675')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><strong><span style="color:Teal">12.&lt;fieldset&gt;</span></strong><br/>fieldset 元素可将表单内的相关元素分组。<br/><br/>&lt;fieldset&gt; 标签将表单内容的一部分打包，生成一组相关表单的字段。<br/><br/>当一组表单元素放到 &lt;fieldset&gt; 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。<br/><br/>&lt;legend&gt; 标签为 fieldset 元素定义标题。<br/><br/>示例：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp65193"><form>
  <fieldset>
    <legend>health information</legend>
    height: <input type=&#34;text&#34; />
    weight: <input type=&#34;text&#34; />
  </fieldset>
</form></TEXTAREA><br/><INPUT onclick="runEx('temp65193')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp65193')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp65193')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><strong><span style="color:Teal">13.&lt;ins&gt;</span></strong> <br/>&lt;ins&gt; 标签 定义已经被插入文档中的文本。常配合&lt;del&gt;标签使用，示例参见&lt;del&gt;标签。<br/><br/><strong><span style="color:Teal">14.&lt;kbd&gt;</span></strong><br/>定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。<br/><br/>示例：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp79079">键入 <kbd>quit</kbd> 来退出程序，或者键入 <kbd>menu</kbd> 来返回主菜单。</TEXTAREA><br/><INPUT onclick="runEx('temp79079')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp79079')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp79079')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><strong><span style="color:Teal">15.&lt;legend&gt;</span></strong> <br/>legend 元素为 fieldset 元素定义标题（caption）。示例参看&lt;fieldset&gt;标签。<br/><br/><strong><span style="color:Teal">16.&lt;noscript&gt;</span></strong><br/>noscript 元素用来定义在脚本未被执行时的替代内容（文本）。<br/><br/>此标签可被用于可识别 &lt;script&gt; 标签但无法支持其中的脚本的浏览器。<br/><br/>示例：（要查看此效果，请先禁用你浏览器的JavaScript）<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp37422"><script type=&#34;text/javascript&#34;>
    <!--
    document.write(&#34;Hello World!&#34;)
    //-->
</script>
<noscript>Your browser does not support JavaScript!</noscript></TEXTAREA><br/><INPUT onclick="runEx('temp37422')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp37422')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp37422')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><strong><span style="color:Teal">17.&lt;optgroup&gt;</span></strong><br/>&lt;option&gt; 标签定义选项组。<br/><br/>optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。<br/><br/>示例：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp62393"><sel&#101;ct>
  <optgroup label=&#34;Swedish Cars&#34;>
    <option value =&#34;volvo&#34;>Volvo</option>
    <option value =&#34;saab&#34;>Saab</option>
  </optgroup>

  <optgroup label=&#34;German Cars&#34;>
    <option value =&#34;mercedes&#34;>Mercedes</option>
    <option value =&#34;audi&#34;>Audi</option>
  </optgroup>
</sel&#101;ct></TEXTAREA><br/><INPUT onclick="runEx('temp62393')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp62393')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp62393')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><br/><strong><span style="color:Teal">18.&lt;pre&gt;</span></strong><br/>pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。<br/><br/>示例：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp60921"><pre>
for i = 1 to 10
     print i
next i
</pre></TEXTAREA><br/><INPUT onclick="runEx('temp60921')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp60921')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp60921')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><strong><span style="color:Teal">19.&lt;q&gt;</span></strong><br/>&lt;q&gt; 标签可定义一个短的引用，与之相对的是&lt;blockquote&gt;标签，&lt;blockquote&gt;是定义段引用。<br/><br/>示例：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp91897">测试的例子：<q>
这是短的引用。
</q></TEXTAREA><br/><INPUT onclick="runEx('temp91897')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp91897')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp91897')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><strong><span style="color:Teal">20.&lt;samp&gt;</span></strong><br/>定义样本文本，&lt;samp&gt; 标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来，对它们加以强调的极少情况下，才使用这个标签。<br/><br/><br/>示例：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp98969">字符序列 <samp>ae</samp> 可能会被转换为 æ 连字字符。</TEXTAREA><br/><INPUT onclick="runEx('temp98969')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp98969')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp98969')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><strong><span style="color:Teal">21.&lt;sub&gt;</span></strong><br/>&lt;sub&gt; 标签可定义下标文本，与&lt;sup&gt;相对。<br/><br/>示例：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp4310">标准字<sub>下标文本</sub></TEXTAREA><br/><INPUT onclick="runEx('temp4310')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp4310')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp4310')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><strong><span style="color:Teal">22.&lt;sup&gt;</span></strong><br/>&lt;sup&gt; 标签可定义上标文本，与&lt;sub&gt;相对。<br/><br/>示例：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp88288">标准字<sup>上标文本</sup></TEXTAREA><br/><INPUT onclick="runEx('temp88288')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp88288')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp88288')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><strong><span style="color:Teal">23.&lt;tfoot&gt;</span></strong><br/>&lt;tfoot&gt; 标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。<br/><br/>tfoot 元素应该与 thead 和 tbody 元素结合起来使用。<br/><br/>示例：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp36354"><table border=&#34;1&#34;>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table></TEXTAREA><br/><INPUT onclick="runEx('temp36354')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp36354')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp36354')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><strong><span style="color:Teal">24.&lt;thead&gt;</span></strong><br/>&lt;thead&gt; 标签定义表格的表头，示例参见&lt;tfoot&gt;标签。<br/><br/><strong><span style="color:Teal">25.&lt;var&gt;</span></strong><br/>&lt;var&gt; 标签表示变量的名称，或者由用户提供的值。<br/><br/>&lt;var&gt; 标签是计算机文档中应用的另一个小窍门，这个标签经常与 &lt;code&gt; 和 &lt;pre&gt; 标签一起使用，用来显示计算机编程代码范例及类似方面的特定元素。<br/><br/>用 &lt;var&gt; 标签标记的文本通常显示为斜体。<br/><br/>示例参见&lt;code&gt;标签。<br/><br/><strong>基于内容的样式和物理样式：</strong><br/><br/>&lt;abbr&gt; &lt;acronym&gt; &lt;cite&gt; &lt;code&gt; &lt;dfn&gt; &lt;em&gt; &lt;kbd&gt; &lt;samp&gt; &lt;strong&gt; &lt;var&gt;等这些是基于内容的样式标签，他们是有语义的，推荐使用。<br/><br/>&lt;b&gt; &lt;big&gt; &lt;i&gt; &lt;s&gt; &lt;small&gt; &lt;strike&gt; &lt;sub&gt; &lt;sup&gt; &lt;tt&gt;等这些是基于物理的样式，虽然可以显示出一些强烈的样式效果，但部分已经不推荐使用。<br/><br/><br/><strong>&lt;h1&gt;~&lt;h6&gt;解析</strong><br/>&lt;h1&gt;~&lt;h6&gt;标签可定义标题。&lt;h1&gt; 定义最大的标题。&lt;h6&gt; 定义最小的标题。seo方面，&lt;h1&gt;到&lt;h6&gt;权重依次减少。<br/><br/><span style="color:Teal">由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。</span><br/><br/><span style="color:Red">&lt;h1&gt; 元素用来描述网页中最上层的标题，并且应该只是用一次。</span><br/><br/>&lt;h2&gt;~&lt;h6&gt;可以多次重复使用，但他们应该按照设计意图和父子顺序出现，h4应该是h3的子标题，h3应该是h2的子标题，以此类推。<br/><br/>示例：<br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp65598"><h1>这里是h1</h1>
<h2>这里是h2</h2>
<h3>这里是h3</h3>
<h4>这里是h4</h4>
<h5>这里是h5</h5>
<h6>这里是h6</h6></TEXTAREA><br/><INPUT onclick="runEx('temp65598')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp65598')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp65598')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div><br/><br/><br/>参考内容：<a href="http://www.w3school.com.cn" target="_blank" rel="external">http://www.w3school.com.cn</a>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.wxwdesign.cn/article/skills/html_tags_semanteme.htm" /> 
	  <id>http://www.wxwdesign.cn/default.asp?id=456</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[jQuery弹出遮罩多对话框插件OverlayBox(类似thickbox)]]></title>
	  <author>
		 <name>admin</name>
		 <uri>http://www.wxwdesign.cn/</uri>
		 <email>wxwdesign.cn</email>
	  </author>
	  <category term="" scheme="http://www.wxwdesign.cn/default.asp?cateID=6" label="Works" /> 
	  <updated>2010-01-26T21:48:05+08:00</updated>
	  <published>2010-01-26T21:48:05+08:00</published>
		  <summary type="html"><![CDATA[今天网站服务器调整，网站关了一天，晚上总算能上了，发个日志透透气。<br/><br/>借助jQuery写了一个插件，<strong>多窗口遮罩效果</strong>。网上找了一番，比如lightbox,thickbox,jqModal,colorbox等等，做的都很不错，<span style="color:Teal">但唯一的局限性就是多窗口的问题</span>，这些插件大部分都是一个弹出层遮罩，如果同时弹出几个，找了半天，没发现接口参数，于是决定自己写个，想取个名字，想来想去还是简单点：OverlayBox。<br/><br/><a target="_blank" href="http://www.wxwdesign.cn//works/javascri&#112;t/OverlayBox/" rel="external"><img src="http://www.wxwdesign.cn/attachments/month_1001/720101271671.gif" border="0" alt=""/></a><br/>截图<br/><br/>程序还不太完善，源代码暂时不放上来了。<br/><br/><a target="_blank" href="http://www.wxwdesign.cn//works/javascri&#112;t/OverlayBox/" rel="external">查看效果</a>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.wxwdesign.cn/article/works/jquery_multiple_dialogue_plugin.htm" /> 
	  <id>http://www.wxwdesign.cn/default.asp?id=455</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[分享CSS WISH LIST]]></title>
	  <author>
		 <name>admin</name>
		 <uri>http://www.wxwdesign.cn/</uri>
		 <email>wxwdesign.cn</email>
	  </author>
	  <category term="" scheme="http://www.wxwdesign.cn/default.asp?cateID=9" label="CSS+JS+XHTML" /> 
	  <updated>2010-01-18T17:50:55+08:00</updated>
	  <published>2010-01-18T17:50:55+08:00</published>
		  <summary type="html"><![CDATA[<p>前段时间在群里有人推荐<a target="_blank" href="http://www.rainaxin.com/2010/01/css-wish-list/">这篇博文</a>，看了一下，很不错。于是到官方看了一下PPT，这是作者写给CSS工作组的建议（Suggestions for the CSS Working Group），建议将CSS打造成一种<strong>声明式语言</strong>，利用变量和原型的方式进行扩展。</p>
<p><strong>PPT资料：</strong></p>
<p>&nbsp;</p>
<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNjM4MDczODk2MDkmcHQ9MTI2MzgwODUwMjI1MCZwPTEwMTkxJmQ9c3NfZW1iZWQmZz*yJm89NThiOWRmYjJiNjUy/NGZlNDgzNjM2NDQ*NWYxNDYwODUmb2Y9MA==.gif" /><div style="width:425px;text-align:left" id="__ss_2453976"><a style="font:14px Helvetica,Arial,Sans-serif;display:block;margin:12px 0 3px 0;text-decoration:underline;" href="http://www.slideshare.net/stubbornella/css-wish-list" title="CSS Wish List @JSConf">CSS Wish List @JSConf</a><object style="margin:0px" width="425" height="355"><param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=new-091108211142-phpapp01&stripped_title=css-wish-list" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=new-091108211142-phpapp01&stripped_title=css-wish-list" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355"></embed></object><div style="font-size:11px;font-family:tahoma,arial;height:26px;padding-top:2px;">View more <a style="text-decoration:underline;" href="http://www.slideshare.net/">presentations</a> from <a style="text-decoration:underline;" href="http://www.slideshare.net/stubbornella">Nicole Sullivan</a>.</div></div>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.wxwdesign.cn/article/skills/css_wish_list.htm" /> 
	  <id>http://www.wxwdesign.cn/default.asp?id=454</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[代发一前端招聘信息]]></title>
	  <author>
		 <name>admin</name>
		 <uri>http://www.wxwdesign.cn/</uri>
		 <email>wxwdesign.cn</email>
	  </author>
	  <category term="" scheme="http://www.wxwdesign.cn/default.asp?cateID=9" label="CSS+JS+XHTML" /> 
	  <updated>2010-01-14T20:32:41+08:00</updated>
	  <published>2010-01-14T20:32:41+08:00</published>
		  <summary type="html"><![CDATA[<strong><a target="_blank" href="http://www.dianping.com" rel="external">大众点评网</a>招聘前端开发人员</strong><br/><br/>岗位职责：<br/>1、参与网站前端技术开发和持续改进<br/>2、研究最新的前端技术并应用到工作中<br/><br/><br/>职位要求：<br/>1、熟悉各种web前端技术，包括xhtml/xml/css/javascript或actionscript等<br/>2、理解web标准，对可用性、可访问性等相关知识有实际的了解和实践经验<br/>3、熟悉mootools,jquery,yui等js库中的一种，具有良好的代码风格、接口设计与程序架构<br/>4、重视团队协作，积极探寻和改进前端开发流程，了解各种常用工具，如firebug，yslow，jslint等<br/><br/>请把简历发送到tech_hr@dianping.com ]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.wxwdesign.cn/article/skills/front_end_developer.htm" /> 
	  <id>http://www.wxwdesign.cn/default.asp?id=453</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[javascript动画缓动——tween与JQuery.easing]]></title>
	  <author>
		 <name>admin</name>
		 <uri>http://www.wxwdesign.cn/</uri>
		 <email>wxwdesign.cn</email>
	  </author>
	  <category term="" scheme="http://www.wxwdesign.cn/default.asp?cateID=9" label="CSS+JS+XHTML" /> 
	  <updated>2010-01-08T17:01:53+08:00</updated>
	  <published>2010-01-08T17:01:53+08:00</published>
		  <summary type="html"><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; <br/>&nbsp;&nbsp;&nbsp;&nbsp; 把一些数学的算法引入到程序里，可以实现很漂亮的效果，利用JavaScript模拟一些曲线函数，实现一些动画缓动效果。<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;使用flash的开发人员，做动画一般会用到tween，利用其数学原理，改版成了<a target="_blank" href="http://www.wxwdesign.cn//works/javascri&#112;t/tween/javascri&#112;t_tween.html" rel="external">JavaScript tween</a>效果，这里有一篇<a target="_blank" href="http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html" rel="external">很好的文章介绍JavaScript tween</a>算法的，分享一下：<br/><br/><strong>缓动类型说明：</strong>(以下说明引用自cloudgamer的blog)<br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">Linear：无缓动效果； <br/>Quadratic：二次方的缓动（t^2）； <br/>Cubic：三次方的缓动（t^3）； <br/>Quartic：四次方的缓动（t^4）； <br/>Quintic：五次方的缓动（t^5）； <br/>Sinusoidal：正弦曲线的缓动（sin(t)）； <br/>Exponential：指数曲线的缓动（2^t）； <br/>Circular：圆形曲线的缓动（sqrt(1-t^2)）； <br/>Elastic：指数衰减的正弦曲线缓动； <br/>Back：超过范围的三次方缓动（(s+1)*t^3 - s*t^2）； <br/>Bounce：指数衰减的反弹缓动。<br/><br/>easeIn：从0开始加速的缓动； <br/>easeOut：减速到0的缓动； <br/>easeInOut：前半段从0开始加速，后半段减速到0的缓动。</div></div><br/><br/><strong>JavaScript Tween源代码：</strong><br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">var Tween = {<br/>&nbsp;&nbsp;&nbsp;&nbsp;Linear: function(t,b,c,d){ return c*t/d + b; },<br/>&nbsp;&nbsp;&nbsp;&nbsp;Quad: {<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeIn: function(t,b,c,d){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return c*(t/=d)*t + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeOut: function(t,b,c,d){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -c *(t/=d)*(t-2) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeInOut: function(t,b,c,d){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ((t/=d/2) &lt; 1) return c/2*t*t + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -c/2 * ((--t)*(t-2) - 1) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br/>&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;Cubic: {<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeIn: function(t,b,c,d){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return c*(t/=d)*t*t + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeOut: function(t,b,c,d){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return c*((t=t/d-1)*t*t + 1) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeInOut: function(t,b,c,d){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ((t/=d/2) &lt; 1) return c/2*t*t*t + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return c/2*((t-=2)*t*t + 2) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br/>&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;Quart: {<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeIn: function(t,b,c,d){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return c*(t/=d)*t*t*t + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeOut: function(t,b,c,d){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -c * ((t=t/d-1)*t*t*t - 1) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeInOut: function(t,b,c,d){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ((t/=d/2) &lt; 1) return c/2*t*t*t*t + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -c/2 * ((t-=2)*t*t*t - 2) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br/>&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;Quint: {<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeIn: function(t,b,c,d){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return c*(t/=d)*t*t*t*t + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeOut: function(t,b,c,d){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return c*((t=t/d-1)*t*t*t*t + 1) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeInOut: function(t,b,c,d){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ((t/=d/2) &lt; 1) return c/2*t*t*t*t*t + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return c/2*((t-=2)*t*t*t*t + 2) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br/>&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;Sine: {<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeIn: function(t,b,c,d){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -c * Math.cos(t/d * (Math.PI/2)) + c + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeOut: function(t,b,c,d){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return c * Math.sin(t/d * (Math.PI/2)) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeInOut: function(t,b,c,d){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br/>&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;Expo: {<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeIn: function(t,b,c,d){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeOut: function(t,b,c,d){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeInOut: function(t,b,c,d){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (t==0) return b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (t==d) return b+c;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ((t/=d/2) &lt; 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br/>&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;Circ: {<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeIn: function(t,b,c,d){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeOut: function(t,b,c,d){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return c * Math.sqrt(1 - (t=t/d-1)*t) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeInOut: function(t,b,c,d){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ((t/=d/2) &lt; 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br/>&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;Elastic: {<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeIn: function(t,b,c,d,a,p){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (t==0) return b;&nbsp;&nbsp;if ((t/=d)==1) return b+c;&nbsp;&nbsp;if (!p) p=d*.3;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!a || a &lt; Math.abs(c)) { a=c; var s=p/4; }<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else var s = p/(2*Math.PI) * Math.asin (c/a);<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeOut: function(t,b,c,d,a,p){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (t==0) return b;&nbsp;&nbsp;if ((t/=d)==1) return b+c;&nbsp;&nbsp;if (!p) p=d*.3;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!a || a &lt; Math.abs(c)) { a=c; var s=p/4; }<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else var s = p/(2*Math.PI) * Math.asin (c/a);<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeInOut: function(t,b,c,d,a,p){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (t==0) return b;&nbsp;&nbsp;if ((t/=d/2)==2) return b+c;&nbsp;&nbsp;if (!p) p=d*(.3*1.5);<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!a || a &lt; Math.abs(c)) { a=c; var s=p/4; }<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else var s = p/(2*Math.PI) * Math.asin (c/a);<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (t &lt; 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br/>&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;Back: {<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeIn: function(t,b,c,d,s){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (s == undefined) s = 1.70158;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return c*(t/=d)*t*((s+1)*t - s) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeOut: function(t,b,c,d,s){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (s == undefined) s = 1.70158;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeInOut: function(t,b,c,d,s){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (s == undefined) s = 1.70158; <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ((t/=d/2) &lt; 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br/>&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;Bounce: {<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeIn: function(t,b,c,d){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return c - Tween.Bounce.easeOut(d-t, 0, c, d) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeOut: function(t,b,c,d){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if ((t/=d) &lt; (1/2.75)) {<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return c*(7.5625*t*t) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else if (t &lt; (2/2.75)) {<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else if (t &lt; (2.5/2.75)) {<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;easeInOut: function(t,b,c,d){<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (t &lt; d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else return Tween.Bounce.easeOut(t*2-d, 0, c, d) * .5 + c*.5 + b;<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br/>&nbsp;&nbsp;&nbsp;&nbsp;}<br/>}</div></div><br/><br/>如果习惯使用JQuery，在Jquery中可以使用更方便的<a target="_blank" href="http://gsgd.co.uk/sandbox/jquery/easing/" rel="external">jquery.easing</a>，jquery.easing下载地址：<a href="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" target="_blank" rel="external">http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js</a><br/><br/><strong>Jquery.easing源代码：</strong><br/><br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><span style="color:Teal">/*<br/> * jQuery Easing v1.3 - <a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank" rel="external">http://gsgd.co.uk/sandbox/jquery/easing/</a><br/> *<br/> * Uses the built in easing capabilities added In jQuery 1.1<br/> * to offer multiple easing options<br/> *<br/> * TERMS OF USE - jQuery Easing<br/> * <br/> * Open source under the BSD License. <br/> * <br/> * Copyright © 2008 George McGinley Smith<br/> * All rights reserved.<br/> * <br/> * Redistribution and use in source and binary forms, with o&#114; without modification, <br/> * are permitted provided that the following conditions are met:<br/> * <br/> * Redistributions of source code must retain the above copyright notice, this list of <br/> * conditions and the following disclaimer.<br/> * Redistributions in binary form must reproduce the above copyright notice, this list <br/> * of conditions and the following disclaimer in the documentation and/or other materials <br/> * provided with the distribution.<br/> * <br/> * Neither the name of the author nor the names of contributors may be used to endorse <br/> * o&#114; promote products derived from this software without specific prior written permission.<br/> * <br/> * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS &#34;AS IS&#34; AND ANY <br/> * EXPRESS o&#114; IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF<br/> * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE<br/> *&nbsp;&nbsp;COPYRIGHT OWNER o&#114; CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,<br/> *&nbsp;&nbsp;EXEMPLARY, o&#114; CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE<br/> *&nbsp;&nbsp;GOODS o&#114; SERVICES; LOSS OF USE, DATA, o&#114; PROFITS; o&#114; BUSINESS INTERRUPTION) HOWEVER CAUSED <br/> * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, o&#114; TORT (INCLUDING<br/> *&nbsp;&nbsp;NEGLIGENCE o&#114; OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED <br/> * OF THE POSSIBILITY OF SUCH DAMAGE. <br/> *<br/>*/<br/><br/>// t: current time, b: begInnIng value, c: change In value, d: duration</span><br/>jQuery.easing[&#39;jswing&#39;] = jQuery.easing[&#39;swing&#39;];<br/><br/>jQuery.extend( jQuery.easing,<br/>{<br/>&#160;&#160;&#160;&#160;def: &#39;easeOutQuad&#39;,<br/>&#160;&#160;&#160;&#160;swing: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<span style="color:Teal">//alert(jQuery.easing.default);</span>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return jQuery.easing[jQuery.easing.def](x, t, b, c, d);<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeInQuad: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return c*(t/=d)*t + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeOutQuad: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return -c *(t/=d)*(t-2) + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeInOutQuad: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if ((t/=d/2) &lt; 1) return c/2*t*t + b;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return -c/2 * ((--t)*(t-2) - 1) + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeInCubic: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return c*(t/=d)*t*t + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeOutCubic: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return c*((t=t/d-1)*t*t + 1) + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeInOutCubic: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if ((t/=d/2) &lt; 1) return c/2*t*t*t + b;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return c/2*((t-=2)*t*t + 2) + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeInQuart: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return c*(t/=d)*t*t*t + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeOutQuart: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return -c * ((t=t/d-1)*t*t*t - 1) + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeInOutQuart: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if ((t/=d/2) &lt; 1) return c/2*t*t*t*t + b;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return -c/2 * ((t-=2)*t*t*t - 2) + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeInQuint: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return c*(t/=d)*t*t*t*t + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeOutQuint: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return c*((t=t/d-1)*t*t*t*t + 1) + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeInOutQuint: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if ((t/=d/2) &lt; 1) return c/2*t*t*t*t*t + b;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return c/2*((t-=2)*t*t*t*t + 2) + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeInSine: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return -c * Math.cos(t/d * (Math.PI/2)) + c + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeOutSine: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return c * Math.sin(t/d * (Math.PI/2)) + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeInOutSine: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeInExpo: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeOutExpo: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeInOutExpo: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if (t==0) return b;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if (t==d) return b+c;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if ((t/=d/2) &lt; 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeInCirc: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeOutCirc: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return c * Math.sqrt(1 - (t=t/d-1)*t) + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeInOutCirc: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if ((t/=d/2) &lt; 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeInElastic: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var s=1.70158;var p=0;var a=c;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if (t==0) return b;&nbsp;&nbsp;if ((t/=d)==1) return b+c;&nbsp;&nbsp;if (!p) p=d*.3;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if (a &lt; Math.abs(c)) { a=c; var s=p/4; }<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;else var s = p/(2*Math.PI) * Math.asin (c/a);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeOutElastic: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var s=1.70158;var p=0;var a=c;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if (t==0) return b;&nbsp;&nbsp;if ((t/=d)==1) return b+c;&nbsp;&nbsp;if (!p) p=d*.3;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if (a &lt; Math.abs(c)) { a=c; var s=p/4; }<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;else var s = p/(2*Math.PI) * Math.asin (c/a);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeInOutElastic: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var s=1.70158;var p=0;var a=c;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if (t==0) return b;&nbsp;&nbsp;if ((t/=d/2)==2) return b+c;&nbsp;&nbsp;if (!p) p=d*(.3*1.5);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if (a &lt; Math.abs(c)) { a=c; var s=p/4; }<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;else var s = p/(2*Math.PI) * Math.asin (c/a);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if (t &lt; 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeInBack: function (x, t, b, c, d, s) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if (s == undefined) s = 1.70158;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return c*(t/=d)*t*((s+1)*t - s) + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeOutBack: function (x, t, b, c, d, s) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if (s == undefined) s = 1.70158;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeInOutBack: function (x, t, b, c, d, s) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if (s == undefined) s = 1.70158; <br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if ((t/=d/2) &lt; 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeInBounce: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeOutBounce: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if ((t/=d) &lt; (1/2.75)) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return c*(7.5625*t*t) + b;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;} else if (t &lt; (2/2.75)) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;} else if (t &lt; (2.5/2.75)) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;} else {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;}<br/>&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;easeInOutBounce: function (x, t, b, c, d) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if (t &lt; d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;<br/>&#160;&#160;&#160;&#160;}<br/>});<br/><br/><span style="color:Teal">/*<br/> *<br/> * TERMS OF USE - EASING EQUATIONS<br/> * <br/> * Open source under the BSD License. <br/> * <br/> * Copyright © 2001 Robert Penner<br/> * All rights reserved.<br/> * <br/> * Redistribution and use in source and binary forms, with o&#114; without modification, <br/> * are permitted provided that the following conditions are met:<br/> * <br/> * Redistributions of source code must retain the above copyright notice, this list of <br/> * conditions and the following disclaimer.<br/> * Redistributions in binary form must reproduce the above copyright notice, this list <br/> * of conditions and the following disclaimer in the documentation and/or other materials <br/> * provided with the distribution.<br/> * <br/> * Neither the name of the author nor the names of contributors may be used to endorse <br/> * o&#114; promote products derived from this software without specific prior written permission.<br/> * <br/> * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS &#34;AS IS&#34; AND ANY <br/> * EXPRESS o&#114; IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF<br/> * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE<br/> *&nbsp;&nbsp;COPYRIGHT OWNER o&#114; CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,<br/> *&nbsp;&nbsp;EXEMPLARY, o&#114; CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE<br/> *&nbsp;&nbsp;GOODS o&#114; SERVICES; LOSS OF USE, DATA, o&#114; PROFITS; o&#114; BUSINESS INTERRUPTION) HOWEVER CAUSED <br/> * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, o&#114; TORT (INCLUDING<br/> *&nbsp;&nbsp;NEGLIGENCE o&#114; OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED <br/> * OF THE POSSIBILITY OF SUCH DAMAGE. <br/> *<br/> */</span></div></div><br/><br/><strong>使用方法：</strong><br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">$(&#34;p&#34;).animate({<br/>&nbsp;&nbsp; opacity: &#39;show&#39;<br/> }, { duration: &#34;slow&#34;, easing: &#34;easein&#34; });</div></div><br/><br/><strong>示例代码：</strong> <a target="_blank" href="http://www.wxwdesign.cn//works/javascri&#112;t/tween/jquery_easing.html" rel="external">在页面中查看demo</a><br/><div class="UBBPanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/html.gif" style="margin:0px 2px -3px 0px"> HTML代码</div><div class="UBBContent"><TEXTAREA rows="8" id="temp17254"><!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>&#34;>
<html xmlns=&#34;<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>&#34;>
<head>
<meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; />
<style type=&#34;text/css&#34; media=&#34;screen&#34;>
body{ margin:0px; padding:0px;}
#test{ width:600px; margin:16px auto; height:100px; background:#999999; font-size:12px; padding:5px;}
</style>
<title>JQuery easing</title>
</head>

<body>
<div id=&#34;test&#34;>请先刷新页面确保JQuery正确加载，JQuery easing test <input type=&#34;button&#34; value=&#34;fold&#34; /> <input type=&#34;button&#34; value=&#34;unfold&#34; /></div>
<script type=&#34;text/javascript&#34; src=&#34;<a href="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" target="_blank" rel="external">http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js</a>&#34;></script>
<script type=&#34;text/javascript&#34; src=&#34;<a href="http://www.wxwdesign.cn/works/javascri&#112;t/jquery.easing.1.3.js" target="_blank" rel="external">http://www.wxwdesign.cn/works/javascri&#112;t/jquery.easing.1.3.js</a>&#34;></script>
<script type=&#34;text/javascript&#34;>
var test=$(&#34;#test&#34;);
var b=$(&#34;#test input&#34;);
b.eq(0).click(fold);
b.eq(1).click(unfold);
function fold(){test.animate({&#34;height&#34;:400},&#34;slow&#34;,&#34;easeOutBounce&#34;);}
function unfold(){test.animate({&#34;height&#34;:100},&#34;slow&#34;,&#34;easeInCirc&#34;);}
function callback(){alert(&#34;run over&#34;);}
</script>
</body>
</html></TEXTAREA><br/><INPUT onclick="runEx('temp17254')"  type="button" class="userbutton" value="运行此代码"/> <INPUT onclick="doCopy('temp17254')"  type="button" class="userbutton" value="复制此代码"/> <INPUT onclick="saveCode('temp17254')" type="button" class="userbutton" value="保存此代码"><br/> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</div></div>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.wxwdesign.cn/article/skills/javascript_animate_tween_jquery_easing.htm" /> 
	  <id>http://www.wxwdesign.cn/default.asp?id=452</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[模拟Google首页苹果掉落效果]]></title>
	  <author>
		 <name>admin</name>
		 <uri>http://www.wxwdesign.cn/</uri>
		 <email>wxwdesign.cn</email>
	  </author>
	  <category term="" scheme="http://www.wxwdesign.cn/default.asp?cateID=6" label="Works" /> 
	  <updated>2010-01-05T00:26:20+08:00</updated>
	  <published>2010-01-05T00:26:20+08:00</published>
		  <summary type="html"><![CDATA[Google经常会为节日制作专门的logo，在牛顿诞辰367周年，Google首页制作了一个苹果掉落的效果，感觉很不错，利用JQuery粗略模拟了一下，由于没有用曲线函数，效果很一般，不能准确模拟其物理特性，分享一下：<a target="_blank" href="http://www.wxwdesign.cn//works/javascri&#112;t/Google_newton_apple" rel="external">查看效果</a>。<br/><br/><a target="_blank" href="http://www.wxwdesign.cn//works/javascri&#112;t/Google_newton_apple" rel="external"><img src="http://www.wxwdesign.cn/attachments/month_1001/j20101502557.jpg" border="0" alt=""/></a><br/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.wxwdesign.cn/article/works/JQuery_imitate_google_newton_apple.htm" /> 
	  <id>http://www.wxwdesign.cn/default.asp?id=451</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[利用JQuery模拟windows文件夹操作面板]]></title>
	  <author>
		 <name>admin</name>
		 <uri>http://www.wxwdesign.cn/</uri>
		 <email>wxwdesign.cn</email>
	  </author>
	  <category term="" scheme="http://www.wxwdesign.cn/default.asp?cateID=6" label="Works" /> 
	  <updated>2010-01-04T17:27:34+08:00</updated>
	  <published>2010-01-04T17:27:34+08:00</published>
		  <summary type="html"><![CDATA[以前也没太注意windows这个效果，早已经习惯了，现在发现用JavaScript可以模拟一下，于是写了一点代码。<a target="_blank" href="http://www.wxwdesign.cn//works/javascri&#112;t/windows_left_bar" rel="external">[查看效果]</a><br/><br/><a target="_blank" href="http://www.wxwdesign.cn//works/javascri&#112;t/windows_left_bar" rel="external"><img src="http://www.wxwdesign.cn/attachments/month_1001/4201014172329.gif" border="0" alt=""/></a><br/><br/><strong>本效果使用了JQuery，代码如下：</strong><br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">var imitate={};<br/>imitate.init=function(){<br/>&#160;&#160;&#160;&#160;this.dt=$(&#34;#content dt&#34;);<br/>&#160;&#160;&#160;&#160;this.dc=$(&#34;#content .dd_container&#34;);<br/>&#160;&#160;&#160;&#160;this.a=$(&#34;#content dt&gt;a&#34;);<br/>&#160;&#160;&#160;&#160;this.dt.each(function(i){$(this).attr(&#34;i&#34;,i)});<br/>&#160;&#160;&#160;&#160;this.dt.click(this.change_show);<br/>&#160;&#160;&#160;&#160;this.a.focus(this.oblur);<br/>}<br/>imitate.change_show=function(){<br/>&#160;&#160;&#160;&#160;$(this).toggleClass(&#34;close&#34;);<br/>&#160;&#160;&#160;&#160;var d=imitate.dc.eq($(this).attr(&#34;i&#34;));<br/>&#160;&#160;&#160;&#160;var h=(d.height()+26)*(-1);<br/>&#160;&#160;&#160;&#160;if($(this).attr(&#34;className&#34;).indexOf(&#34;close&#34;)&gt;-1){d.animate({&#34;marginTop&#34;:h,&#34;opacity&#34;:0.0},300);}else{d.animate({&#34;marginTop&#34;:0,&#34;opacity&#34;:1.0},300);} <br/>}<br/>imitate.oblur=function(){this.blur()}<br/>imitate.init();</div></div>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.wxwdesign.cn/article/works/JQuery_imitate_windows_left_panel.htm" /> 
	  <id>http://www.wxwdesign.cn/default.asp?id=450</id>
  </entry>	
		
  <entry>
	  <title type="html"><![CDATA[基于分层模式的不规则多边形地图切换效果]]></title>
	  <author>
		 <name>admin</name>
		 <uri>http://www.wxwdesign.cn/</uri>
		 <email>wxwdesign.cn</email>
	  </author>
	  <category term="" scheme="http://www.wxwdesign.cn/default.asp?cateID=6" label="Works" /> 
	  <updated>2010-01-03T00:48:08+08:00</updated>
	  <published>2010-01-03T00:48:08+08:00</published>
		  <summary type="html"><![CDATA[网页布局往往都是遵循横竖排列的规则，对于不规则多边形布局往往显得比较繁琐，做了一个地图的不规则图形的变换效果，<a target="_blank" href="http://www.wxwdesign.cn/works/javascri&#112;t/maps/" rel="external">查看效果</a>。<br/><br/><a target="_blank" href="http://www.wxwdesign.cn/works/javascri&#112;t/maps/" rel="external"><img src="http://www.wxwdesign.cn/attachments/month_1001/y2010130151.gif" border="0" alt=""/></a><br/><br/><strong>效果基于JQuery，代码如下：</strong><br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.wxwdesign.cn/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent">var map={};<br/>map.pngfix=function(){$(&#39;#map_container&#39;).pngFix();}<br/>map.oblur=function(){this.blur();}<br/>map.stop_href=function(){return false;}<br/>map.init=function(){<br/>&nbsp;&nbsp;&nbsp;&nbsp;this.map_a=$(&#34;#map_container .province_list&gt;a&#34;);<br/>&#160;&#160;&#160;&#160;this.area=$(&#34;#Map&gt;area&#34;);<br/>&#160;&#160;&#160;&#160;this.area.each(function(i){$(this).attr(&#34;num&#34;,i);});<br/>&#160;&#160;&#160;&#160;this.area.mouseover(this.show_area).mouseout(this.hidden_area).click(this.stop_href).focus(this.oblur);<br/>&#160;&#160;&#160;&#160;map.pngfix();<br/>&#160;&#160;&#160;&#160;map.setTooltips();<br/>}<br/>map.show_area=function(){map.map_a.eq($(this).attr(&#34;num&#34;)).show();}<br/>map.hidden_area=function(){map.map_a.eq($(this).attr(&#34;num&#34;)).hide();}<br/>map.setTooltips=function(){map.area.tooltip({track:true,delay:0,showURL:false});}<br/>map.init();</div></div><br/><br/>其中使用了JQuery的两个插件，PNGfix和tooltips。<br/><br/><strong>PNGfix使用方法：</strong><br/>父元素对象.pngFix();&nbsp;&nbsp; <span style="color:Teal">//会使父元素内的png修正透明问题，而对父元素本身无效。</span><br/><br/><br/><strong>原理图：</strong><br/><img src="http://www.wxwdesign.cn/attachments/month_1001/m20101305047.jpg" border="0" alt=""/><br/>]]></summary>
	  <link rel="alternate" type="text/html" href="http://www.wxwdesign.cn/article/works/multi_layer_map.htm" /> 
	  <id>http://www.wxwdesign.cn/default.asp?id=449</id>
  </entry>	
		
</feed>
