<?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/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Ethan&#039;s Blog</title>
	<atom:link href="http://imethan.com/?feed=rss2" rel="self" type="application/rss+xml" />
	<link>http://imethan.com</link>
	<description>一个前端娃</description>
	<lastBuildDate>Fri, 30 Jul 2010 14:07:53 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>将VIM的.swp转移到别处</title>
		<link>http://imethan.com/?p=419</link>
		<comments>http://imethan.com/?p=419#comments</comments>
		<pubDate>Sun, 11 Jul 2010 11:03:47 +0000</pubDate>
		<dc:creator>Ethan</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://imethan.com/?p=419</guid>
		<description><![CDATA[用vim开发很爽，特别是和ZenCoding的结合，能让前端开发效率大增。
使用vim编辑文件的时候，vim会在文件的同目录下生成一个&#8221;.同名.swp&#8221;的文件，主要用于恢复崩溃文件。
但在多人协同开发的时候，通常会使用版本控制软件，svn、git、cc或其他，或者使用同步工具将文件实时同步的时候，这个文件多少会给人造成麻烦。
解决办法有二：
1. set directory=$YOURDIR，将swp转移到别的地方去
2. set noswapfile，让vim别产生那个文件
打开你的vip，在命令模式输入:e $MYVIMRC，随便找个地方添加以上一句即可。

]]></description>
			<content:encoded><![CDATA[<p>用vim开发很爽，特别是和ZenCoding的结合，能让前端开发效率大增。</p>
<p>使用vim编辑文件的时候，vim会在文件的同目录下生成一个&#8221;.同名.swp&#8221;的文件，主要用于恢复崩溃文件。</p>
<p>但在多人协同开发的时候，通常会使用版本控制软件，svn、git、cc或其他，或者使用同步工具将文件实时同步的时候，这个文件多少会给人造成麻烦。</p>
<p>解决办法有二：</p>
<p>1. set directory=$YOURDIR，将swp转移到别的地方去</p>
<p>2. set noswapfile，让vim别产生那个文件</p>
<p>打开你的vip，在命令模式输入:e $MYVIMRC，随便找个地方添加以上一句即可。<br />
<a href="http://imethan.com/wp-content/uploads/2010/07/wpic_12923319744.png"><img class="alignnone size-full wp-image-420" title="wpic_12923319744" src="http://imethan.com/wp-content/uploads/2010/07/wpic_12923319744.png" alt="" width="588" height="257" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://imethan.com/?feed=rss2&amp;p=419</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>IE6下敏感的安全报警</title>
		<link>http://imethan.com/?p=406</link>
		<comments>http://imethan.com/?p=406#comments</comments>
		<pubDate>Thu, 08 Jul 2010 18:18:55 +0000</pubDate>
		<dc:creator>Ethan</dc:creator>
				<category><![CDATA[无穷无尽的前端技巧]]></category>

		<guid isPermaLink="false">http://imethan.com/?p=406</guid>
		<description><![CDATA[IE6有个安全机制，有时候很烦人，当从https(secure)的环境中引用任何http(nosecure)的资源的时候，都要为用户弹出不安全提示框。

很多人可能只知引起这个报警的条件一：https页面中加载http的任何链接时；殊不知，还有其二：当元素具有src属性时，如果src属性值为空，或为about:blank或#时，也会弹出这个安全提示。
新上线的支付宝VIP会员频道发布过程中也遇到这个问题在，原来在iframe中使用了一个#，和几个同事焦躁的排查了近2个小时。
对于一个https环境的网站来说，遇到这种报警简直是家常便饭，排查起来就要特别小心了。由于第一种情况比较常见，所以我们的固定思维都聚集在了第一种上，出现问题排查的时候往往也只知道的去查找http链接。但当所有http链接都处理完后，如果仍然弹出这个提示，那多半是第二种情况产生的了。
另外，排查的好办法是Fiddler或Firebug、HttpWatch等网络请求查看工具，可能很明显的看出问题。
&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;## 2010-07-09 19:37 Updated ##&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;
忘了给出解决办法：
在不想让src为确切值时，我们可以指定src为javascript:false;便解决了。 via http://www.zorked.com/security/ie-mixed-content-secure-nonsecure-items/
]]></description>
			<content:encoded><![CDATA[<p>IE6有个安全机制，有时候很烦人，当从https(secure)的环境中引用任何http(nosecure)的资源的时候，都要为用户弹出不安全提示框。<br />
<a href="http://imethan.com/wp-content/uploads/2010/07/wpic_12923086134.png"><img class="alignnone size-full wp-image-409" title="wpic_12923086134" src="http://imethan.com/wp-content/uploads/2010/07/wpic_12923086134.png" alt="" width="341" height="169" /></a></p>
<p>很多人可能只知引起这个报警的条件一：https页面中加载http的任何链接时；殊不知，还有其二：当元素具有src属性时，如果src属性值为空，或为about:blank或#时，也会弹出这个安全提示。</p>
<p>新上线的<a href="http://vip.alipay.com/">支付宝VIP会员频道</a>发布过程中也遇到这个问题在，原来在iframe中使用了一个#，和几个同事焦躁的排查了近2个小时。</p>
<p>对于一个https环境的网站来说，遇到这种报警简直是家常便饭，排查起来就要特别小心了。由于第一种情况比较常见，所以我们的固定思维都聚集在了第一种上，出现问题排查的时候往往也只知道的去查找http链接。但当所有http链接都处理完后，如果仍然弹出这个提示，那多半是第二种情况产生的了。</p>
<p>另外，排查的好办法是Fiddler或Firebug、HttpWatch等网络请求查看工具，可能很明显的看出问题。<br />
&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;## 2010-07-09 19:37 Updated ##&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;<br />
忘了给出解决办法：<br />
在不想让src为确切值时，我们可以指定src为javascript:false;便解决了。 via <a href="http://www.zorked.com/security/ie-mixed-content-secure-nonsecure-items/" target="_blank">http://www.zorked.com/security/ie-mixed-content-secure-nonsecure-items/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://imethan.com/?feed=rss2&amp;p=406</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>让Mac下的Chrome支持F5刷新</title>
		<link>http://imethan.com/?p=361</link>
		<comments>http://imethan.com/?p=361#comments</comments>
		<pubDate>Sun, 20 Jun 2010 04:10:55 +0000</pubDate>
		<dc:creator>Ethan</dc:creator>
				<category><![CDATA[披着糖衣的Mac炮弹]]></category>

		<guid isPermaLink="false">http://imethan.com/?p=361</guid>
		<description><![CDATA[习惯了使用F5键刷新的同学可能都会困惑于Mac下的Chrome,因为按F5无法刷新，特别是对于前端开发的童鞋，不可避免的要使劲刷新当前页调试。
我就是因为这个原因而一度放弃了在Mac上使用Chrome，转向Firefox阵营，然而最近发现还是Chrome方便简洁。
怎么让Chrome支持F5刷新呢？
打开系统偏好设置[System Preferences] &#62;&#62; 键盘[Keyboard] &#62;&#62; 键盘快捷键选项卡[Keyboard Shortcuts] 
然后弹出如下图所示，点击“＋”键，应用程序处选择“谷歌浏览器”，菜单标题填写你Chrome“视图”菜单中的“重新载入此页”或“Reload This Page”，根据你Chrome中的具体菜单标题而定，快捷键处按下F5，然后点击添加就O啦。试试吧。

]]></description>
			<content:encoded><![CDATA[<p>习惯了使用F5键刷新的同学可能都会困惑于Mac下的Chrome,因为按F5无法刷新，特别是对于前端开发的童鞋，不可避免的要使劲刷新当前页调试。</p>
<p>我就是因为这个原因而一度放弃了在Mac上使用Chrome，转向Firefox阵营，然而最近发现还是Chrome方便简洁。</p>
<p><strong>怎么让Chrome支持F5刷新呢？</strong></p>
<p>打开<strong>系统偏好设置[System Preferences] &gt;&gt; 键盘[Keyboard] &gt;&gt; 键盘快捷键选项卡[Keyboard Shortcuts] </strong></p>
<p>然后弹出如下图所示，点击“＋”键，应用程序处选择“谷歌浏览器”，菜单标题填写你Chrome“<strong>视图</strong>”菜单中的“<strong>重新载入此页</strong>”或“<strong>Reload This Page</strong>”，根据你Chrome中的具体菜单标题而定，快捷键处按下F5，然后点击添加就O啦。试试吧。</p>
<p><strong><a href="http://imethan.com/wp-content/uploads/2010/06/201006201138.jpg"><img class="alignnone size-full wp-image-362" title="201006201138" src="http://imethan.com/wp-content/uploads/2010/06/201006201138.jpg" alt="" width="675" height="603" /></a></strong></p>
]]></content:encoded>
			<wfw:commentRss>http://imethan.com/?feed=rss2&amp;p=361</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Milestone刷Root权限</title>
		<link>http://imethan.com/?p=358</link>
		<comments>http://imethan.com/?p=358#comments</comments>
		<pubDate>Sat, 19 Jun 2010 15:17:46 +0000</pubDate>
		<dc:creator>Ethan</dc:creator>
				<category><![CDATA[不仅仅是数码设备]]></category>

		<guid isPermaLink="false">http://imethan.com/?p=358</guid>
		<description><![CDATA[最近屁癫屁癫的买了个Milestone，欧水，老板给刷成了Android2.1系统的，用着还行，速度还不错，知足了。
然而，最近老上不去Android的菜市场，网上一查，很多人都有这个问题，也提供了解决方案，要改hosts。自己用文件浏览器进去看了看，发现只有只读权限，原来需要root权限才能修改系统文件，于是又去网上搜索Milestone相关的刷Root权限的教程，让我先复制update.zip文件（各大站点均有下载）到SD卡根目录，然后关机，按住拍照键和电源键进入bootloader。
然后我就依样画葫芦的捣腾，发现重启好几次都进步了bootloader，一次偶然按住了音量增加键，出现了bootloader的版本信息，我的版本是90.87，网上一搜，说这个版本的Milestone要按住x键和电源键才能进入bootloader，然后在尝试了一下，果然进去了，看到了那个黄色三角感叹号的图标。接下来的步骤就和其他教程的一样了，顺利刷好，重启，修改hosts，ok了。
FYI：http://forum.tgbus.com/viewthread.php?tid=824087&#038;extra=page%3D1
]]></description>
			<content:encoded><![CDATA[<p>最近屁癫屁癫的买了个Milestone，欧水，老板给刷成了Android2.1系统的，用着还行，速度还不错，知足了。</p>
<p>然而，最近老上不去Android的菜市场，网上一查，很多人都有这个问题，也提供了解决方案，要改hosts。自己用文件浏览器进去看了看，发现只有只读权限，原来需要root权限才能修改系统文件，于是又去网上搜索Milestone相关的刷Root权限的教程，让我先复制update.zip文件（各大站点均有下载）到SD卡根目录，然后关机，按住拍照键和电源键进入bootloader。</p>
<p>然后我就依样画葫芦的捣腾，发现重启好几次都进步了bootloader，一次偶然按住了音量增加键，出现了bootloader的版本信息，我的版本是90.87，网上一搜，说这个版本的Milestone要按住x键和电源键才能进入bootloader，然后在尝试了一下，果然进去了，看到了那个黄色三角感叹号的图标。接下来的步骤就和其他教程的一样了，顺利刷好，重启，修改hosts，ok了。</p>
<p>FYI：<a href="http://forum.tgbus.com/viewthread.php?tid=824087&#038;extra=page%3D1">http://forum.tgbus.com/viewthread.php?tid=824087&#038;extra=page%3D1</a></p>
]]></content:encoded>
			<wfw:commentRss>http://imethan.com/?feed=rss2&amp;p=358</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>在Chrome上Inject你的HTML或JS甚至是CSS</title>
		<link>http://imethan.com/?p=269</link>
		<comments>http://imethan.com/?p=269#comments</comments>
		<pubDate>Tue, 27 Apr 2010 11:57:21 +0000</pubDate>
		<dc:creator>Ethan</dc:creator>
				<category><![CDATA[无穷无尽的前端技巧]]></category>

		<guid isPermaLink="false">http://imethan.com/?p=269</guid>
		<description><![CDATA[淘宝可爱的才女沉鱼姐分享了她使用Fiddler的经验，其中使用Fiddler替换本地文件很是受用，对于线上调试非常管用。
由于我平常工作的网站环境是https，使用Fiddler无法捕获到通讯，就无法使用线上文件替换的功能了，于是想想还有什么可替代的办法。猜想Chrome插件应该有注入代码的插件，于是上Google Extension的网站搜了一下Inject，找到了这个Advanced Page Injector，点击安装后打开&#8221;扩展程序&#8221;-&#62;&#8221;选项&#8221;进行配置，点击“Add a new rule”：

然后填写具体的规则：

然后，你就可以随意注入了，不过，不要注入有含有本地文件的地址，会报错的XD，建议搭建个本地web环境然后引用localhost的内容，然后你就可以随意随时的改东西了。
希望还能找到个可以像Fiddler一样可以映射本地或线上文件的Chrome插件……
/**************************************************************************&#62;&#62;&#62;
哦，后来我知道了，原来可以在选项里面开启https支持，Tools-&#62;Fiddler Options-&#62;HTTPS-&#62;Capture HTTPS CONNECTS-&#62;Decrypt HTTPS traffic
]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.taobao.com/">淘宝</a>可爱的才女<a href="http://www.fool2fish.cn/">沉鱼姐</a>分享了她<a href="http://www.fool2fish.cn/?p=430">使用Fiddler的经验</a>，其中使用Fiddler替换本地文件很是受用，对于线上调试非常管用。</p>
<p>由于我平常工作的网站环境是https，使用Fiddler无法捕获到通讯，就无法使用线上文件替换的功能了，于是想想还有什么可替代的办法。猜想Chrome插件应该有注入代码的插件，于是上Google Extension的网站搜了一下Inject，找到了这个<a href="https://chrome.google.com/extensions/detail/hiadkoalmmkgennhcldmdlndfgagkcim">Advanced Page Injector</a>，点击安装后打开&#8221;扩展程序&#8221;-&gt;&#8221;选项&#8221;进行配置，点击“Add a new rule”：<br />
<a href="http://imethan.com/wp-content/uploads/2010/04/adp-add.png"><img class="alignnone size-full wp-image-270" title="adp-add" src="http://imethan.com/wp-content/uploads/2010/04/adp-add.png" alt="" width="478" height="271" /></a></p>
<p>然后填写具体的规则：<br />
<a href="http://imethan.com/wp-content/uploads/2010/04/adp-add2.png"><img class="alignnone size-full wp-image-271" title="adp-add2" src="http://imethan.com/wp-content/uploads/2010/04/adp-add2.png" alt="" width="552" height="573" /></a></p>
<p>然后，你就可以随意注入了，不过，不要注入有含有本地文件的地址，会报错的XD，建议搭建个本地web环境然后引用localhost的内容，然后你就可以随意随时的改东西了。</p>
<p>希望还能找到个可以像Fiddler一样可以映射本地或线上文件的Chrome插件……</p>
<p>/**************************************************************************&gt;&gt;&gt;<br />
哦，后来我知道了，原来可以在选项里面开启https支持，Tools-&gt;Fiddler Options-&gt;HTTPS-&gt;Capture HTTPS CONNECTS-&gt;Decrypt HTTPS traffic</p>
]]></content:encoded>
			<wfw:commentRss>http://imethan.com/?feed=rss2&amp;p=269</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>IE6中Post数据到HTTP和HTTPS的问题</title>
		<link>http://imethan.com/?p=261</link>
		<comments>http://imethan.com/?p=261#comments</comments>
		<pubDate>Sun, 25 Apr 2010 10:57:03 +0000</pubDate>
		<dc:creator>Ethan</dc:creator>
				<category><![CDATA[无穷无尽的前端技巧]]></category>

		<guid isPermaLink="false">http://imethan.com/?p=261</guid>
		<description><![CDATA[昨天同事找到我，说咱们的“客户端下载”在IE6下通过短信下载的方式不能用。
打开IE Tester测试发现确实不能用，提示验证码错误。
先讲下我们的页面结构，为了实现前后端分离，我们现在的做法是将静态页面和逻辑处理分别放在不同服务器上面的，这样可以避开繁琐的发布流程方便前端修改。所以，像通过短信下载这类的逻辑就需要前端Post给后端，原本后端只支持https，但我们的页面是http，由http转到https的过程中部分浏览器会弹出安全警告框，因此将后端改成了https和http并存的方式。
改完后却出现了IE6无法下载的情况，查看http的header显示，当我请求POST数据到后端http时，后端返回一个302状态Location Redirect到了https，也就是最终还是POST到了https的页面，那为什么服务器会拿不到POST过去的正确数据呢？
当IE6 POST请求由http转到https后，笨笨的IE6认为这还是http连接，于是照样采用非加密方式向服务器POST数据。先是发送Header信息“POST / HTTP/1.1 Content-Type: application/x-www-form-urlencoded”标明这是一个POST请求且有数据主体，又因为SSL(https)只对请求主体内容加密，Header并不加密（通过Fiddler可以看到），服务器便能接收到请求，但是由于是通过加密通道获取到数据主体，服务器则将其看作加密数据进行解密，于是，杯具就这样造成了。而其他浏览器，处理则聪明多了。
最终还是无奈的改回到https咯，等待服务器改成新的http/https共存方案吧。
]]></description>
			<content:encoded><![CDATA[<p>昨天同事找到我，说咱们的“客户端下载”在IE6下通过短信下载的方式不能用。</p>
<p>打开IE Tester测试发现确实不能用，提示验证码错误。</p>
<p>先讲下我们的页面结构，为了实现前后端分离，我们现在的做法是将静态页面和逻辑处理分别放在不同服务器上面的，这样可以避开繁琐的发布流程方便前端修改。所以，像通过短信下载这类的逻辑就需要前端Post给后端，原本后端只支持https，但我们的页面是http，由http转到https的过程中部分浏览器会弹出安全警告框，因此将后端改成了https和http并存的方式。</p>
<p>改完后却出现了IE6无法下载的情况，查看http的header显示，当我请求POST数据到后端http时，后端返回一个302状态Location Redirect到了https，也就是最终还是POST到了https的页面，那为什么服务器会拿不到POST过去的正确数据呢？</p>
<p>当IE6 POST请求由http转到https后，笨笨的IE6认为这还是http连接，于是照样采用非加密方式向服务器POST数据。先是发送Header信息“POST / HTTP/1.1 Content-Type: application/x-www-form-urlencoded”标明这是一个POST请求且有数据主体，又因为SSL(https)只对请求主体内容加密，Header并不加密（通过Fiddler可以看到），服务器便能接收到请求，但是由于是通过加密通道获取到数据主体，服务器则将其看作加密数据进行解密，于是，杯具就这样造成了。而其他浏览器，处理则聪明多了。</p>
<p>最终还是无奈的改回到https咯，等待服务器改成新的http/https共存方案吧。</p>
]]></content:encoded>
			<wfw:commentRss>http://imethan.com/?feed=rss2&amp;p=261</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>CSS3 Transition详解</title>
		<link>http://imethan.com/?p=236</link>
		<comments>http://imethan.com/?p=236#comments</comments>
		<pubDate>Sat, 24 Apr 2010 02:51:01 +0000</pubDate>
		<dc:creator>Ethan</dc:creator>
				<category><![CDATA[HTML & CSS碰撞的火花]]></category>
		<category><![CDATA[无穷无尽的前端技巧]]></category>

		<guid isPermaLink="false">http://imethan.com/?p=236</guid>
		<description><![CDATA[Transition是CSS3中新添加的特性，不知道翻译成什么叫法更好听一点，暂且叫做“转换”吧，即当元素在大小、颜色、布局、透明度等数值改变时（请注意是数值的改变），可以使其产生过渡的动画效果，比如当元素的大小变动时，可以使用Transition将这个变动过程变得分平滑，可以增强网站的体验。
基础知识
Transition对应的CSS属性列表：
 transition-property
 * 指定当元素哪个属性改变时执行Transition效果，属性可以时以下属性：none、all以及其他可以触发浏览器reflow或repaint的属性。
* 当指定为none时，动画立即停止，当指定为all的时候，则当元素产生任何属性值变化时都将执行“转换”效果，比如大小改变。
* 初始默认值为all.
 transition-duration
* 指定“转换”过程的时间，如：1s、none。
* 初始默认值为0.
transition-timing-function
 * 指定“转换”过程中可用的效果，预设的有：ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)，默认值时easy。
* cubic-bezier为通过贝塞尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。

* 初始默认值为default.
transition-delay
* 指定一个动画开始执行的时间，即当改变元素属性值后多长时间开始执行“转换效果”
* 初始默认值为0.
以上属性可看下面这个demo（如果无法看到效果，请更换你的浏览器）：

.trans-demo{
	width: 100px;
	height:20px;
	background: #f00;
	opacity: .5;
	-webkit-transition-property: width, height;
	-webkit-transition-duration: 2s;
	-webkit-transition-timing-function: easy-in-out;
	-webkit-transition-delay: 0s;
	/** Just For Firefox3.7+ **/
	-moz-transition-property: width, height;
	-moz-transition-duration: 2s;
	-moz-transition-timing-function: easy-in-out;
	-moz-transition-delay: 0s;
}
.t-demo{
	border:1px solid #ccc;
	padding: 3px;
}

随机更改高度和宽度 设定transition为none

这是一个参照物

document.querySelectorAll('button')[0].onclick = function(){
	document.querySelector('div.trans-demo').style.width = Math.random() * 600 + 'px';
	document.querySelector('div.trans-demo').style.height [...]]]></description>
			<content:encoded><![CDATA[<p>Transition是CSS3中新添加的特性，不知道翻译成什么叫法更好听一点，暂且叫做“转换”吧，即当元素在大小、颜色、布局、透明度等数值改变时（<span style="color: #ff0000;">请注意是数值的改变</span>），可以使其产生过渡的动画效果，比如当元素的大小变动时，可以使用Transition将这个变动过程变得分平滑，可以增强网站的体验。</p>
<h2><strong>基础知识</strong></h2>
<p>Transition对应的CSS属性列表：<br />
<strong> transition-property<br />
</strong> * 指定当元素哪个属性改变时执行Transition效果，属性可以时以下属性：none、all以及其他可以触发浏览器reflow或repaint的属性。<br />
* 当指定为none时，动画立即停止，当指定为all的时候，则当元素产生任何属性值变化时都将执行“转换”效果，比如大小改变。<br />
* 初始默认值为all.</p>
<p><strong> transition-duration<br />
</strong>* 指定“转换”过程的时间，如：1s、none。<br />
* 初始默认值为0.</p>
<p><strong>transition-timing-function<br />
</strong> * 指定“转换”过程中可用的效果，预设的有：ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)，默认值时easy。<br />
* cubic-bezier为通过<a href="http://baike.baidu.com/view/60154.htm" target="_blank">贝塞尔曲线</a>来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。<br />
<img class="alignnone" src="http://www.w3.org/TR/css3-transitions/TimingFunction.png" alt="" width="379" height="351" /><br />
* 初始默认值为default.</p>
<p><strong>transition-delay<br />
</strong>* 指定一个动画开始执行的时间，即当改变元素属性值后多长时间开始执行“转换效果”<br />
* 初始默认值为0.</p>
<p>以上属性可看下面这个demo（如果无法看到效果，请更换你的浏览器）：</p>
<style type="text/css">
.trans-demo{
	width: 100px;
	height:20px;
	background: #f00;
	opacity: .5;
	-webkit-transition-property: width, height;
	-webkit-transition-duration: 2s;
	-webkit-transition-timing-function: easy-in-out;
	-webkit-transition-delay: 0s;
	/** Just For Firefox3.7+ **/
	-moz-transition-property: width, height;
	-moz-transition-duration: 2s;
	-moz-transition-timing-function: easy-in-out;
	-moz-transition-delay: 0s;
}
.t-demo{
	border:1px solid #ccc;
	padding: 3px;
}
</style>
<p><button>随机更改高度和宽度</button> <button>设定transition为none</button></p>
<div class="trans-demo"></div>
<div class="t-demo">这是一个参照物</div>
<p><script language="javascript">
document.querySelectorAll('button')[0].onclick = function(){
	document.querySelector('div.trans-demo').style.width = Math.random() * 600 + 'px';
	document.querySelector('div.trans-demo').style.height = Math.random() * 300 + 'px';
};
document.querySelectorAll('button')[1].onclick = function(){
	document.querySelector('div.trans-demo').style.webkitTransitionProperty = 'none';
};
</script></p>
<h2>深度问题挖掘</h2>
<p><strong>属性值连写（短属性）<br />
</strong>* transition和background等CSS属性一样支持属性值连写，比如：-webkit-transition: width 1s easy-in-out;<br />
* 需要值得注意的是，原则上所有属性值是不区分位置的，<span style="color: #ff0000;"><strong>但是“时间属性值”有点不同，浏览器会根据先后顺序决定，第一个可以解析为时间的属性值将体现为transition-duration，第二个可以解析为时间的属性值将体现为transition-delay</strong></span></p>
<p><strong>浏览器支持状况？</strong><br />
* Chrome 2+(-webkit-transition)，Firefox3.7+(-moz-transition)，Safari 3.1+(-webkit-transition)，Opera 10.5+(-o-transition)，其他浏览器暂不支持</p>
<p><strong>Reflow</strong><strong>和</strong><strong>Repaint</strong><strong>？</strong><br />
<strong>*</strong> Transition执行过程中，同样会产生大量的Reflow和Repaint，不过不同的是，这些变化都有一定是按照CSS中定义的运作方式规律的进行，所以浏览器可以预知整个过程的Reflow和Repaint过程，从而对其进行优化处理。(个人猜测，这需要查看webkit源码后再作结论)</p>
<p><strong>正确理解Timing-function</strong><br />
* 这是几个Timing-function曲线图：<br />
<a href="../wp-content/uploads/2010/04/Untitled-1.gif"><img title="Bezier曲线" src="../wp-content/uploads/2010/04/Untitled-1.gif" alt="" width="738" height="174" /></a><br />
* 这是几个默认timing-function的示例：<br />
<style type="text/css">#stable {
	padding: 0.5em 0;
	border: 1px solid #ccc;
	border-left: 1em solid green;
	border-right: 1em solid #006;
	background-color: #eee;
	font-size: 12px;
	width: 600px;
}
#stable .showbox {
	margin: 1em;
	width: 100px;
	height: 40px;
	border: 2px solid;
	border-color: green;
	background-color: #cfc;
	line-height: 40px;
	text-align: center;
	-webkit-transition-duration: 2s;
}
#stable:hover .showbox {
	width: 500px;
	-border-color: #006;
	-background-color: #ccf;
}</style>
<div id="stable">
<div class="showbox">default &raquo;</div>
<div class="showbox" style="-webkit-transition-timing-function: linear;">linear &raquo;</div>
<div class="showbox" style="-webkit-transition-timing-function: ease-in;">ease-in &raquo;</div>
<div class="showbox" style="-webkit-transition-timing-function: ease-out;">ease-out &raquo;</div>
<div class="showbox" style="-webkit-transition-timing-function: ease-in-out;">ease-in-out &raquo;</div>
<div class="showbox" style="-webkit-transition-timing-function: cubic-bezier(0,1,1,0);">cubic-bezier &raquo;</div>
</div>
<p>* 一次“转变”便是一次曲线过程</p>
<p><strong>激发Transition的条件<br />
</strong>* 只要为元素指定任意一个以上的transition属性，元素在改变属性值的时候便可执行transition效果，并设其他属性值为初始值，详见上述属性列表。看这个demo：
<div style="-webkit-transition-duration:2s; width:300px; padding:10px; border: 2px solid #ccc; background:#a01000;color:#fff;" onmouseover="this.style.width='500px';" onmouseout="this.style.width='300px';">鼠标移动到元素上方可观察变化效果</div>
<pre>
&lt;div style="<b>-webkit-transition-duration:2s;</b> width:300px; padding:10px;
border: 2px solid #ccc; background:#a01000;color:#fff;"
onmouseover="this.style.width='500px';"
onmouseout="this.style.width='300px';"&gt;鼠标移动到元素上方可观察变化效果&lt;/div&gt;
</pre>
<p>* 值得注意的是，本文不止一次提到，<span style="color: #ff0000;">是当“属性值”改变时才会激发transition效果</span>，而不是所有“元素外观”的改变都会激发的，比如设定元素的宽度为百分比，然后改变浏览器大小，元素大小在改变的同时并未发现由transition的效果呈现。请看这<a href="http://51demo.net/ethan/2010042401.html" target="_blank">两个demo</a>。<br />
&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;邪恶的补充线&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;</p>
<blockquote><p>
实践中还发现，当元素Layout不可见即display为none时，操作元素为block的同时操作其他可transition属性时，无法激发transition效果。解决办法为，先将元素设为block（或其他可见值），再setTimeout(function(){ /**属性改变代码**/ }, 0)，将transition操作提到js操作队列最后执行。//2010-06-01</p></blockquote>
<h2>收尾</h2>
<p>嗯，transition就研究到这里吧，文章中有些只是个人臆测的结论，请不要盲目相信，随后我将继续扫一遍webkit中关于transition的源码再给出结论。</p>
<p>发现写一篇文章真累，废寝忘食，腰酸背疼，更加葱白大牛们写blog的毅力了，所以要懂得珍惜人家的劳动成果。</p>
]]></content:encoded>
			<wfw:commentRss>http://imethan.com/?feed=rss2&amp;p=236</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>绕道解决IE6下Select遮罩其他层的问题</title>
		<link>http://imethan.com/?p=228</link>
		<comments>http://imethan.com/?p=228#comments</comments>
		<pubDate>Tue, 20 Apr 2010 17:19:09 +0000</pubDate>
		<dc:creator>Ethan</dc:creator>
				<category><![CDATA[Javascript, 你是谁？]]></category>
		<category><![CDATA[无穷无尽的前端技巧]]></category>

		<guid isPermaLink="false">http://imethan.com/?p=228</guid>
		<description><![CDATA[以前碰到弹出层被Select框突出的时候，都是靠再弹出层上价格iframe来盖住，因为再ie6中iframe和select以及object都属于特殊对象，无论你改变div的zIndex为多大都照样会出现这种情况。
前段时间做支付宝手机站项目的时候又遇到了这个问题，无奈，用传统iframe解决的时候发现项目中弹出层背后还有半透明层，如果使用iframe达不到需要的效果。
但在使用iframe的时候发现，select box更像是被隐藏掉了，使用iframe之前：
﻿﻿
使用iframe之后：

于是萌生了针对ie6操作dom将所有select元素隐藏掉。于是写了以下函数（改进版）：
/**
  * s - Bool, 控制selectbox为显示(false)或隐藏(true)
  * e - DomElement, 控制selectbox dom查询深度，有利于提高效率
  **/
var hideSelectBox = function(s, e){
    if(!window.XMLHttpRequest){  //Detect IE6
        var d = e&#124;&#124;document;
        var b = d.getElementsByTagName('select');
      [...]]]></description>
			<content:encoded><![CDATA[<p>以前碰到弹出层被Select框突出的时候，都是靠再弹出层上价格iframe来盖住，因为再ie6中iframe和select以及object都属于特殊对象，无论你改变div的zIndex为多大都照样会出现这种情况。</p>
<p>前段时间做<a href="http://mobile.alipay.com/" target="_blank">支付宝手机站</a>项目的时候又遇到了这个问题，无奈，用传统iframe解决的时候发现项目中弹出层背后还有半透明层，如果使用iframe达不到需要的效果。</p>
<p>但在使用iframe的时候发现，select box更像是被隐藏掉了，使用iframe之前：<br />
﻿﻿<a href="http://imethan.com/wp-content/uploads/2010/04/a.jpg"><img class="alignnone size-full wp-image-229" title="a" src="http://imethan.com/wp-content/uploads/2010/04/a.jpg" alt="" width="207" height="138" /><br />
</a>使用iframe之后：<br />
<a href="http://imethan.com/wp-content/uploads/2010/04/b.jpg"><img class="alignnone size-full wp-image-230" title="b" src="http://imethan.com/wp-content/uploads/2010/04/b.jpg" alt="" width="210" height="156" /></a></p>
<p><a href="http://imethan.com/wp-content/uploads/2010/04/b.jpg"></a>于是萌生了针对ie6操作dom将所有select元素隐藏掉。于是写了以下函数（改进版）：</p>
<pre>/**
  * s - Bool, 控制selectbox为显示(false)或隐藏(true)
  * e - DomElement, 控制selectbox dom查询深度，有利于提高效率
  **/
var hideSelectBox = function(s, e){
    if(!window.XMLHttpRequest){  //Detect IE6
        var d = e||document;
        var b = d.getElementsByTagName('select');
        for(var i=0,l=b.length; i&lt;l; i++){
            b[i].style.visibility = s?'hidden':'visible';
        }
    }
};
</pre>
<p><a href="http://imethan.com/demo/iframeSelect.html" target="_blank">查看DEMO</a></p>
]]></content:encoded>
			<wfw:commentRss>http://imethan.com/?feed=rss2&amp;p=228</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Linux上甩开Apache安装SVN</title>
		<link>http://imethan.com/?p=226</link>
		<comments>http://imethan.com/?p=226#comments</comments>
		<pubDate>Mon, 29 Mar 2010 13:08:15 +0000</pubDate>
		<dc:creator>Ethan</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[与Linux邂逅在漆黑的夜晚]]></category>

		<guid isPermaLink="false">http://imethan.com/?p=226</guid>
		<description><![CDATA[最近捣腾了一个美国vps，把博客之类的都移民到国外去，由于平时常要在家里和公司来回切换，所以顺便用作平时同步的服务器。
虽然Google这个大好人提供了免费的SVN服务器，但是，他是全公开的，我个人除了代码外，可能还要同步些敏感信息。又想过付费买些SVN或GIT的服务，不靠谱的不敢买，靠谱的价格又贵，还不如自己买个VPS，放心多了，话不多说，开工。
这台VPS买了的时候是提供商给我装的干净的CentOS5.4，不过它太干净了，很多软件开发包都没有装上，杯具，但是本着“缺啥补啥”的原则，其实也不麻烦。
VPS上的WEB Server是nginx，简单，配置文件简洁，但功能很强大，所以我一直摒弃庞大笨重的Apache，既然不用Apache，自然也不想为了装SVN而去装个Apache，下面讲讲我装的过程，留个备份。
先下载最新的SVN源码包并解压：http://subversion.apache.org/

$bash# wget http://subversion.tigris.org/downloads/subversion-1.6.9.tar.gz
$bash# tar xzvf subversion-1.6.9.tar.gz
$bash# cd subversion-1.6.9

配置并检测编译环境：

$bash# ./configure --prefix=/usr/local/svn --with-ssl
configure: Configuring Subversion 1.6.9
configure: creating config.nice
checking for gcc... gcc
checking for C compiler default output file name... a.out
checking whether the C compiler works... yes
checking whether we are cross compiling... no
checking for suffix of executables...
checking for suffix of object files... o
checking whether we are using the [...]]]></description>
			<content:encoded><![CDATA[<p>最近捣腾了一个美国vps，把博客之类的都移民到国外去，由于平时常要在家里和公司来回切换，所以顺便用作平时同步的服务器。</p>
<p>虽然Google这个大好人提供了免费的SVN服务器，但是，他是全公开的，我个人除了代码外，可能还要同步些敏感信息。又想过付费买些SVN或GIT的服务，不靠谱的不敢买，靠谱的价格又贵，还不如自己买个VPS，放心多了，话不多说，开工。</p>
<p>这台VPS买了的时候是提供商给我装的干净的CentOS5.4，不过它太干净了，很多软件开发包都没有装上，杯具，但是本着“缺啥补啥”的原则，其实也不麻烦。</p>
<p>VPS上的WEB Server是nginx，简单，配置文件简洁，但功能很强大，所以我一直摒弃庞大笨重的Apache，既然不用Apache，自然也不想为了装SVN而去装个Apache，下面讲讲我装的过程，留个备份。</p>
<p>先下载最新的SVN源码包并解压：<a href="http://subversion.apache.org/">http://subversion.apache.org/</a></p>
<pre>
$bash# wget http://subversion.tigris.org/downloads/subversion-1.6.9.tar.gz
$bash# tar xzvf subversion-1.6.9.tar.gz
$bash# cd subversion-1.6.9
</pre>
<p>配置并检测编译环境：</p>
<pre>
$bash# ./configure --prefix=/usr/local/svn --with-ssl
configure: Configuring Subversion 1.6.9
configure: creating config.nice
checking for gcc... gcc
checking for C compiler default output file name... a.out
checking whether the C compiler works... yes
checking whether we are cross compiling... no
checking for suffix of executables...
checking for suffix of object files... o
checking whether we are using the GNU C compiler... yes
...
checking for APR... no
configure: WARNING: APR not found
The Apache Portable Runtime (APR) library cannot be found.
Please install APR on this system and supply the appropriate
--with-apr option to 'configure'

or

get it with SVN and put it in a subdirectory of this source
...
Whichever of the above you do, you probably need to do
something similar for apr-util, either providing both
--with-apr and --with-apr-util to 'configure', or
getting both from SVN with:
...
</pre>
<p>一大堆checking之后，configure中断，提示无法找到APR和APR-util，原来SVN需要Apache的两个。其实我也不知道APR和APR-util是啥，于是网上Google之，翻来翻去找到了这个http://svn.haxx.se/dev/archive-2010-01/0545.shtml，一个名叫subversion-deps的东西，包含了离开apache安装SVN所依赖的东西，就在原来下载SVN源码的下方。这下好了，下到服务器，放在和svn源码同一级目录下，解压，然后再次执行configure，又报以下错误：</p>
<pre>
configure: checking sqlite library
amalgamation not found at /usr/local/src/subversion-1.6.9/sqlite-amalgamation/sqlite3.c
checking sqlite3.h usability... no
checking sqlite3.h presence... no
checking for sqlite3.h... no
checking sqlite library version (via pkg-config)... no

An appropriate version of sqlite could not be found.  We recommmend
3.6.13, but require at least 3.4.0.
Please either install a newer sqlite on this system
</pre>
<p>提示所需要的SQLite版本过低，前往它给出的URL下载并直接configure&#038;&#038;make&#038;&#038;make install，继续回到svn源码目录，configure之，期待着万事大吉。</p>
<pre>
configure: creating ./config.status
config.status: creating Makefile
config.status: creating sqlite3.pc
config.status: creating config.h
config.status: executing libtool commands
</pre>
<p>OK，检测完成，可以开始编译了，运行make命令;</p>
<pre>
tclsh ./tool/mksqlite3h.tcl . >sqlite3.h
/bin/sh: tclsh: command not found
make: *** [sqlite3.h] Error 127
</pre>
<p>编译终止，貌似缺少tcl，好嘛，继续本着“缺啥补啥”的原则，yum install tcl，再make，make install，一路下来终于没有报错了，这下可万事大吉了，首先得感谢国家让我接受长达9年得有偿义务教育，才能让我能看得到这么多单词。</p>
]]></content:encoded>
			<wfw:commentRss>http://imethan.com/?feed=rss2&amp;p=226</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>价值的实现</title>
		<link>http://imethan.com/?p=221</link>
		<comments>http://imethan.com/?p=221#comments</comments>
		<pubDate>Sat, 27 Mar 2010 03:16:41 +0000</pubDate>
		<dc:creator>Ethan</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://imethan.com/?p=221</guid>
		<description><![CDATA[这几天的氛围，让我感觉有点难受。首先是前端合并到技术部，磊哥那双红红的眼睛；再到一向温婉谦和的么么茶突然的激动，似乎将前端的价值体现推到了一个风口浪尖。
按照常有的理解，前端开发合并到技术部其实应该是对前端的认可，对前端应该是上升了一个高度，但为什么在我们脸上却完全看不到兴奋。每个人都在沉思，心绪复杂，尤其是磊哥，我可以明显看到他那双红红的眼睛，他说自己的心中有种难舍的UED情结。可惜，我不懂，我也不可能懂。在他心中，前端开发不只是CSS、JS，前端同时也应该是用户、交互甚至是视觉。在UED的大环境中，他可以可以参与设计，可以参与调研，也可以为用户体验而PK。我想，他可能是有点担心了，担心以后很难再这样，他担心前端实现自身价值的路是不是就更难了。
昨天的周会，说实话，我有点吓到了。我完全没有意识到，前端价值对于么么茶来说是多么重要的东西，可以因为一个口误或是有点偏激的建议而变得如此的激动。再一次让我们反思，什么是前端，什么是前端价值。“如果连辛辛苦苦积累起来的基础都丢掉了，那还做什么，那就真成了个切页面的了”，这让我突然想起，以前的我们被别人的定义也就是带有藐视的“页面仔”，但发展到现在不一样了，html、css、js、压缩、优化，没有人研究得比前端透彻。
每个人都在努力寻求着自己价值得体现。有梦想的人生是很美好的，当你翻过一个又一个的山头，看着广袤富庶的平原就在前面不远处的时候，你会非常的兴奋，即便那只是海市蜃楼，你也会忘掉身上的酸楚和路上的荆棘。
其实，我们并没什么不一样，都不过是一群追梦的人罢了。
]]></description>
			<content:encoded><![CDATA[<p>这几天的氛围，让我感觉有点难受。首先是前端合并到技术部，磊哥那双红红的眼睛；再到一向温婉谦和的么么茶突然的激动，似乎将前端的价值体现推到了一个风口浪尖。</p>
<p>按照常有的理解，前端开发合并到技术部其实应该是对前端的认可，对前端应该是上升了一个高度，但为什么在我们脸上却完全看不到兴奋。每个人都在沉思，心绪复杂，尤其是磊哥，我可以明显看到他那双红红的眼睛，他说自己的心中有种难舍的UED情结。可惜，我不懂，我也不可能懂。在他心中，前端开发不只是CSS、JS，前端同时也应该是用户、交互甚至是视觉。在UED的大环境中，他可以可以参与设计，可以参与调研，也可以为用户体验而PK。我想，他可能是有点担心了，担心以后很难再这样，他担心前端实现自身价值的路是不是就更难了。</p>
<p>昨天的周会，说实话，我有点吓到了。我完全没有意识到，前端价值对于么么茶来说是多么重要的东西，可以因为一个口误或是有点偏激的建议而变得如此的激动。再一次让我们反思，什么是前端，什么是前端价值。“如果连辛辛苦苦积累起来的基础都丢掉了，那还做什么，那就真成了个切页面的了”，这让我突然想起，以前的我们被别人的定义也就是带有藐视的“页面仔”，但发展到现在不一样了，html、css、js、压缩、优化，没有人研究得比前端透彻。</p>
<p>每个人都在努力寻求着自己价值得体现。有梦想的人生是很美好的，当你翻过一个又一个的山头，看着广袤富庶的平原就在前面不远处的时候，你会非常的兴奋，即便那只是海市蜃楼，你也会忘掉身上的酸楚和路上的荆棘。</p>
<p>其实，我们并没什么不一样，都不过是一群追梦的人罢了。</p>
]]></content:encoded>
			<wfw:commentRss>http://imethan.com/?feed=rss2&amp;p=221</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>
