日志分类
日志分类列表加载中...
· 认知：IE6、IE7支持但不完全支持display:inline-block属性
· javascript中top、clientTop、scrollTop、offsetTop的用法[收藏]
· IE6 下textarea width 100% bug
认知：IE6、IE7支持但不完全支持display:inline-block属性
2012-3-12 15:51:12 阅读28 评论0 122012/03 Mar12
发布一个小时后，总感觉不安，查询了一些资料，决定修改本篇。
原文标题是：认知：IE6、IE7的确不识别display:inline-block属性，内容如下：
-------------------------------------自制分割线-----------------------------------------
虽然布局中经常用到display:inline-block，ie6,ie7也确实表现的跟“真”的一样，但是这 哥俩 确实是不识inline-block为何物的。。。
因为我曾经试着对div设置display:inline-block;来布局，FF没有问题，但是ie6不行依然将div解析为block，当时偶觉得是ie的bug。
今天在群里偶然被提起了，一位童鞋提供了一个网址，看了以后深表认同，看到此文的第一句
vapour 写道
在IE6、IE7中不识别display:inline-block属性，但使用inline-block属性在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。
立马就想到了之前div inline-block的尝试，无需犹豫了。
此文写的很清楚了，偶就无需多说，贴上链接，有研究的可以详细参看：
http://www.dovapour.com.cn/article/20090611175.html
--------------------
原文标题是：认知：IE6、IE7的确不识别display:inline-block属性，内容如下：
-------------------------------------自制分割线-----------------------------------------
虽然布局中经常用到display:inline-block，ie6,ie7也确实表现的跟“真”的一样，但是这 哥俩 确实是不识inline-block为何物的。。。
因为我曾经试着对div设置display:inline-block;来布局，FF没有问题，但是ie6不行依然将div解析为block，当时偶觉得是ie的bug。
今天在群里偶然被提起了，一位童鞋提供了一个网址，看了以后深表认同，看到此文的第一句
vapour 写道
在IE6、IE7中不识别display:inline-block属性，但使用inline-block属性在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。
立马就想到了之前div inline-block的尝试，无需犹豫了。
此文写的很清楚了，偶就无需多说，贴上链接，有研究的可以详细参看：
http://www.dovapour.com.cn/article/20090611175.html
--------------------
HTML5语音输入（webkit）
2012-2-6 11:25:59 阅读49 评论1 62012/02 Feb6
这个语音输入，在andorid上已经早早有啦。以至于在淘宝发现，就兴致匆匆的想要加进自己的博客。经过一番苦苦寻找，才发现代码就那么一小段。
只需要在input添加属性x-webkit-speech即可，如：
<input type="text" x-webkit-speech />
这样搜索框的就多了一个小话筒，点击就可以使用谷歌的云语音输入啦。
我自己的在我的手机上用的时候感觉识别率挺高的，也是变相说明我普通话很准哈。
还有其他属性，比如：
<input type="text" x-webkit-speech lang="zh-CN"/>
通过lang来限制语言种类。或者：
<input type="text" x-webkit-speech x-webkit-grammar="builtin:search" />
使得语音输入的内容尽量靠近搜索内容，去除多余的字符。还有：
<input type="text" x-webkit-speech onwebkitspeechchange="func()" />
通过发生语言时触发的语音事件。
好了，这个功能只在chrome11及以后版本才支持的。其他浏览器暂时不支持的，不过貌似火狐可以通过插件支持，可以搜索一下。
文章来源
只需要在input添加属性x-webkit-speech即可，如：
<input type="text" x-webkit-speech />
这样搜索框的就多了一个小话筒，点击就可以使用谷歌的云语音输入啦。
我自己的在我的手机上用的时候感觉识别率挺高的，也是变相说明我普通话很准哈。
还有其他属性，比如：
<input type="text" x-webkit-speech lang="zh-CN"/>
通过lang来限制语言种类。或者：
<input type="text" x-webkit-speech x-webkit-grammar="builtin:search" />
使得语音输入的内容尽量靠近搜索内容，去除多余的字符。还有：
<input type="text" x-webkit-speech onwebkitspeechchange="func()" />
通过发生语言时触发的语音事件。
好了，这个功能只在chrome11及以后版本才支持的。其他浏览器暂时不支持的，不过貌似火狐可以通过插件支持，可以搜索一下。
文章来源
HTML5视频发展状况
2012-2-6 9:32:07 阅读26 评论0 62012/02 Feb6
注：这篇报告来自LongTail Video
HTML5已经进入了在线视频市场，这是一件激 动人心的事情，同时也对工业开发者提出了挑战。随着HTML5规范和各种浏览器的不断改变，LongTail Video花费了大量的时间来弄清楚这一技术的本质，并且在各种浏览器以及设备上测试了播放效果，然后针对HTML5播放效果对产品进行了优化。
HTML5视频发展现状一文意在与其他的用户以及开发者分享HTML5所支持的技术以及无法实现的技术。
在JW Player开发过程中，我们执行了许多常规测试来检测当前在线视频的状况。这篇报告重点关注HTML5支持技术的当前状况，我们还将继续完善我们的产 品，我们会将我们发现的最新结果向大家公布，希望大家能够从我们发现的结果中获得帮助，我们将测试的结果分成了几个主题。
随着HTML5视频的发展，这篇报告也会随着发生改变。如果一个浏览器或是设备添加了新的功能，我们将在这篇报告中补充相关内容。对于那些不常使用的HTML5视频功能也是一样。欢迎在Facebook上与我们讨论。
1.浏览器和设备的市场份额
首先分享的是浏览器和设备的市场份额统计数据，以及它们目前支持的模式。目前还难以给出一个准确的数据，因为两大数据提供商——StatCounter
HTML5已经进入了在线视频市场，这是一件激 动人心的事情，同时也对工业开发者提出了挑战。随着HTML5规范和各种浏览器的不断改变，LongTail Video花费了大量的时间来弄清楚这一技术的本质，并且在各种浏览器以及设备上测试了播放效果，然后针对HTML5播放效果对产品进行了优化。
HTML5视频发展现状一文意在与其他的用户以及开发者分享HTML5所支持的技术以及无法实现的技术。
在JW Player开发过程中，我们执行了许多常规测试来检测当前在线视频的状况。这篇报告重点关注HTML5支持技术的当前状况，我们还将继续完善我们的产 品，我们会将我们发现的最新结果向大家公布，希望大家能够从我们发现的结果中获得帮助，我们将测试的结果分成了几个主题。
随着HTML5视频的发展，这篇报告也会随着发生改变。如果一个浏览器或是设备添加了新的功能，我们将在这篇报告中补充相关内容。对于那些不常使用的HTML5视频功能也是一样。欢迎在Facebook上与我们讨论。
1.浏览器和设备的市场份额
首先分享的是浏览器和设备的市场份额统计数据，以及它们目前支持的模式。目前还难以给出一个准确的数据，因为两大数据提供商——StatCounter
永远别瞧不起自己，未来是光明的
2011-12-29 21:26:55 阅读34 评论1 292011/12 Dec29
———谨以此文献给那些走入歧途的朋友们，希望你们能抬起头看到天空中的太阳。
今天有个同学的QQ被盗了，盗号者冒充我同学向我借钱，结果很快被我识破了。
于是他便开始骂我，我下意识的回了一句 “其实吧 像你们这样的有啥意思？ 有本事靠自己能力赚钱，破罐子破摔有意思么？”，本来只是想说说他没有指望有什么回应的，令我吃惊的是他居然回了一条“呵呵 这个社会 有钱什么都有了，不可以用破罐子摔坏 来比我 ”。让我倍感惊讶，后来和他长谈之后才发现，其实并不是每个“恶人”的心都是黑的，他们只是一时冲昏了头脑失去了方向罢了。
“但是我成功的话 他们都会看起我 而不是看你的背后是怎样的”；
“我也不想骂人 只是我骗他 他也来玩我 ”；
“呵呵 做点有意义的事？ 做什么啊 打工？ 还是去帮人家擦屁股啊 ”；
“我也想不去骗啊 在说了 骗到钱也是人家的辛苦钱 有些都是能够命钱 我心里也很过不去 ”；
“我从心里说些 我真心话 ，我真的不想做这些 很烦 老是被人说骗子 老是被人骂 ”；
“你说的话 我也想过 现在我就是要改变改变自己 只有改变才会变 自我反省 别人有 我为什么没有 他家有 什么他家里有 ”；
“本人来了 我不上他QQ了 多谢你这个人 不骂人 还和说些帮人的话 我敬重你 ”；
今天有个同学的QQ被盗了，盗号者冒充我同学向我借钱，结果很快被我识破了。
于是他便开始骂我，我下意识的回了一句 “其实吧 像你们这样的有啥意思？ 有本事靠自己能力赚钱，破罐子破摔有意思么？”，本来只是想说说他没有指望有什么回应的，令我吃惊的是他居然回了一条“呵呵 这个社会 有钱什么都有了，不可以用破罐子摔坏 来比我 ”。让我倍感惊讶，后来和他长谈之后才发现，其实并不是每个“恶人”的心都是黑的，他们只是一时冲昏了头脑失去了方向罢了。
“但是我成功的话 他们都会看起我 而不是看你的背后是怎样的”；
“我也不想骂人 只是我骗他 他也来玩我 ”；
“呵呵 做点有意义的事？ 做什么啊 打工？ 还是去帮人家擦屁股啊 ”；
“我也想不去骗啊 在说了 骗到钱也是人家的辛苦钱 有些都是能够命钱 我心里也很过不去 ”；
“我从心里说些 我真心话 ，我真的不想做这些 很烦 老是被人说骗子 老是被人骂 ”；
“你说的话 我也想过 现在我就是要改变改变自己 只有改变才会变 自我反省 别人有 我为什么没有 他家有 什么他家里有 ”；
“本人来了 我不上他QQ了 多谢你这个人 不骂人 还和说些帮人的话 我敬重你 ”；
前端工程师的价值体现在哪里?
2011-12-5 12:56:43 阅读45 评论1 52011/12 Dec5
豆瓣前端:
认为前端工程师正慢慢演变为产品工程师。wap app, 响应性UI等以html5技术为基础的开发将成为前端工程师的主要工作内容，解决产品跨平台跨设备的实现问题。Javascript, HTML, CSS这些前端工程师熟悉的，多年使用的语言，作为开放标准将被各种平台所支持。产品形态和数据的分离是形势所趋。移动时代对产品形态多元化的要求虽然可 以靠不同技术分别实现，但要付出巨大的成本。这也是html5这个04年就提出来的标准，直到前两年才火爆的原因。
现阶段的价值也很大。 web产品交互越来越复杂，用户使用体验和网站前端性能优化，这些都需要专业的前端工程师来解决。另外，在项目中还要弥补设计师在交互设计上的不足，前端 工程师在开发过程中起着重要的承上启下的作用。一两个前端工程师就可以让整个开发并行起来，让设计到实现的转换更顺利。明智的公司应该贮备前端工程师资 源。
我不认为前端工程师和产品经理有什么关系。好的前端工程师一定会成为好的交互设计师。前端工程师对信息架构的理解应不亚于专业的交互设计师。
新浪前端：
作为前端工程师最核心的价值或者说是责任，就是将大伙的所有心血和努力最终要完美地呈现给用户。在一个技术开发团队中，无疑离用户最近的人就是前端，其次是UI、UE和产品，然后是后端、DBA和系统工程师。
如 果说一个技术开发团队就是一支足球队的话，那么前端工程师无疑就是前锋，他接到队友们倾力传到脚下的球，他责无旁贷，要做的就是必须将球准确无误地打入对 方的球门….. 他有两点必须是非常清楚：
认为前端工程师正慢慢演变为产品工程师。wap app, 响应性UI等以html5技术为基础的开发将成为前端工程师的主要工作内容，解决产品跨平台跨设备的实现问题。Javascript, HTML, CSS这些前端工程师熟悉的，多年使用的语言，作为开放标准将被各种平台所支持。产品形态和数据的分离是形势所趋。移动时代对产品形态多元化的要求虽然可 以靠不同技术分别实现，但要付出巨大的成本。这也是html5这个04年就提出来的标准，直到前两年才火爆的原因。
现阶段的价值也很大。 web产品交互越来越复杂，用户使用体验和网站前端性能优化，这些都需要专业的前端工程师来解决。另外，在项目中还要弥补设计师在交互设计上的不足，前端 工程师在开发过程中起着重要的承上启下的作用。一两个前端工程师就可以让整个开发并行起来，让设计到实现的转换更顺利。明智的公司应该贮备前端工程师资 源。
我不认为前端工程师和产品经理有什么关系。好的前端工程师一定会成为好的交互设计师。前端工程师对信息架构的理解应不亚于专业的交互设计师。
新浪前端：
作为前端工程师最核心的价值或者说是责任，就是将大伙的所有心血和努力最终要完美地呈现给用户。在一个技术开发团队中，无疑离用户最近的人就是前端，其次是UI、UE和产品，然后是后端、DBA和系统工程师。
如 果说一个技术开发团队就是一支足球队的话，那么前端工程师无疑就是前锋，他接到队友们倾力传到脚下的球，他责无旁贷，要做的就是必须将球准确无误地打入对 方的球门….. 他有两点必须是非常清楚：
解决FLASH最高层的问题，让FLASH置于div之下
2011-10-25 15:05:48 阅读61 评论0 252011/10 Oct25
三个步骤：
1.设置div 的 z-index:9999 //在最上面显示 这一步就可以保证div在img之上
2.<param name="wmode" value="opaque" />或者<param name="wmode" value="transparent" />（transparent会使Flash变
得透明，建议使用opaque） //IE
3.embed 中加入 wmode="transparent" //FF Chrome
DIV浮动层被FLASH挡住的简单解决方法
只要在Flash对象加入页面时生成的HTML代码中加入以下参数就可以让Div浮动层从Flash下露出来了：
<param name="wmode" value="transparent" />
另外一个更专业的参数：
<param name="wmode" value="opaque" />
transparent是负责透明的，显出浮动只不过是他的一个副业而已；而opaque才是专门负责让Flash位于其它层下的。
wmode 属性/参数
值 Window | Opaque | Transparent
说明：
（可选）允许使用 Internet Explorer 4.0 中的透明 Flash 内容、绝对定位和分层显示功能。此标记/属性仅在带有 Flash
1.设置div 的 z-index:9999 //在最上面显示 这一步就可以保证div在img之上
2.<param name="wmode" value="opaque" />或者<param name="wmode" value="transparent" />（transparent会使Flash变
得透明，建议使用opaque） //IE
3.embed 中加入 wmode="transparent" //FF Chrome
DIV浮动层被FLASH挡住的简单解决方法
只要在Flash对象加入页面时生成的HTML代码中加入以下参数就可以让Div浮动层从Flash下露出来了：
<param name="wmode" value="transparent" />
另外一个更专业的参数：
<param name="wmode" value="opaque" />
transparent是负责透明的，显出浮动只不过是他的一个副业而已；而opaque才是专门负责让Flash位于其它层下的。
wmode 属性/参数
值 Window | Opaque | Transparent
说明：
（可选）允许使用 Internet Explorer 4.0 中的透明 Flash 内容、绝对定位和分层显示功能。此标记/属性仅在带有 Flash
javascript中top、clientTop、scrollTop、offsetTop的用法[收藏]
2011-10-25 10:12:46 阅读48 评论0 252011/10 Oct25
js中常用宽度高度表达方式（详情见图）：
网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;
1、offsetLeft
假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
网页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;
1、offsetLeft
假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
空路径对页面性能的影响
2011-9-23 12:30:13 阅读74 评论0 232011/09 Sept23
今天同事小凡反馈，淘宝有个商品详情页，旺铺皮肤的 CSS 文件在 Firefox 下很奇怪的被加载了两次。最近对 detail 的渲染速度进行了优化，因此遇到 bug 第一反应是往优化方面找原因。然而调试了许久才发现，该 bug 居然是一个在淘宝深藏了很久的 bug, 在 IE 下会导致一些糟糕的情况产生。一身冷汗，立刻分析解决之。
这个 bug 并不新鲜。早在 2009 年，Nicholas C. Zakas 就发现了空 src 的危害性：Empty image src can destroy your site.
Nicholas 的发现可以概括为一句话：img, script, link 的 src/href 为空时，有可能会导致冗余请求。
今天这个 bug 的起因，可以补充 Nicholas 的发现：CSS 里，background url 为空时，也有可能会导致冗余请求。
除了空值，还有一个值也会出问题：#值。 比如 <img src=”#”>
具体测试结果请看：test.html
从测试结果中可以看出，#值比空值更糟糕。比如 background: url(#), 直接会触发一个新请求。这次旺铺皮肤的样式文件在 Firefox 下被加载两次，就是因为第三方设计师在 css 里写入了 url(#). css
这个 bug 并不新鲜。早在 2009 年，Nicholas C. Zakas 就发现了空 src 的危害性：Empty image src can destroy your site.
Nicholas 的发现可以概括为一句话：img, script, link 的 src/href 为空时，有可能会导致冗余请求。
今天这个 bug 的起因，可以补充 Nicholas 的发现：CSS 里，background url 为空时，也有可能会导致冗余请求。
除了空值，还有一个值也会出问题：#值。 比如 <img src=”#”>
具体测试结果请看：test.html
从测试结果中可以看出，#值比空值更糟糕。比如 background: url(#), 直接会触发一个新请求。这次旺铺皮肤的样式文件在 Firefox 下被加载两次，就是因为第三方设计师在 css 里写入了 url(#). css
IE下“怪异模式”的触发
2011-9-23 12:26:05 阅读82 评论0 232011/09 Sept23
问题从做一个布局的水平居中开始，比如：（head省略）
<body><div id="wrapper"></div></body>
要让wrapper定宽并水平居中，需要#wrapper {width:960px;margin:0 auto;}即可，但是在IE的怪异模式下需要加上body {text-align:center;} #wrapper {text-align:left;}
曾经一度认为这个是IE6的hack，正确认识后，这只是IE在怪异模式下才有的问题，那么，通常什么什么情况下会触发IE的怪异模式：
1.没写DOCTYPE，这个最常见；
2.写了DOCTYPE，但不在文档的第一行，实验证明，在DOCTYPE之前有任何非空字符都会触发IE6的怪异模式，在IE7下，DOCTYPE之前有XML的文档声明并不触发，但是在DOCTYPE和XML文档声明之间有任何非空字符仍然会触发。
所以，为了不触发怪异模式，要保证DOCTYPE写在整个html文档的第一行。
<body><div id="wrapper"></div></body>
要让wrapper定宽并水平居中，需要#wrapper {width:960px;margin:0 auto;}即可，但是在IE的怪异模式下需要加上body {text-align:center;} #wrapper {text-align:left;}
曾经一度认为这个是IE6的hack，正确认识后，这只是IE在怪异模式下才有的问题，那么，通常什么什么情况下会触发IE的怪异模式：
1.没写DOCTYPE，这个最常见；
2.写了DOCTYPE，但不在文档的第一行，实验证明，在DOCTYPE之前有任何非空字符都会触发IE6的怪异模式，在IE7下，DOCTYPE之前有XML的文档声明并不触发，但是在DOCTYPE和XML文档声明之间有任何非空字符仍然会触发。
所以，为了不触发怪异模式，要保证DOCTYPE写在整个html文档的第一行。
IE6 下textarea width 100% bug
2011-9-14 9:48:55 阅读134 评论0 142011/09 Sept14
BUG综述：
1.IE6中textarea width:100% 导致其超出body、浏览器有滚动条。
2.某些复杂结构下 输入文字之后 textarea 宽度会自动变宽，这个不举例子了，反正就是在有float 以及有margin的情况下会出现此情况，请遇到的同学自己对号入座。
3.IE6中textarea width:100% 导致的其他bug，此类童鞋可以参考此方法尝试能不能fix bug
/*样式表*/
html, body { width:100%; height:100%; }
/*html*/
< textarea style="width:100%;"></textarea>
解决方案
将<textarea>加在<fieldset></fieldset>标签中,并用<div></div>包围（一定要用div，这点很重要）。
<fieldset>
<div>
<textarea style="width: 100%;" name="content"></textarea>
</div>
</fieldset>
1.IE6中textarea width:100% 导致其超出body、浏览器有滚动条。
2.某些复杂结构下 输入文字之后 textarea 宽度会自动变宽，这个不举例子了，反正就是在有float 以及有margin的情况下会出现此情况，请遇到的同学自己对号入座。
3.IE6中textarea width:100% 导致的其他bug，此类童鞋可以参考此方法尝试能不能fix bug
/*样式表*/
html, body { width:100%; height:100%; }
/*html*/
< textarea style="width:100%;"></textarea>
解决方案
将<textarea>加在<fieldset></fieldset>标签中,并用<div></div>包围（一定要用div，这点很重要）。
<fieldset>
<div>
<textarea style="width: 100%;" name="content"></textarea>
</div>
</fieldset>
IE6,IE7,IE8兼容HTML5方法
2011-9-13 22:29:39 阅读89 评论0 132011/09 Sept13
HTML5能为我们做的事儿很多，最为可口的就是语义化标签的应用，如果你已经在Chrome或者其他支持HTML5的浏览器上用过它的牛x，那这篇文章对你一定有用，因为现在你也可以在IE上用到HTML5。
好吧！大前端今天的主题是：HTML5 Shiv
下面是引用Google的html5.js文件，好处就不说了：
<!–[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
将上代码复制到head部分，记住一定要是head部分（因为IE必须在元素解析前知道这个元素，所以这个js文件不能在其他位置调用，否则失效）
当然，你也可以把代码拿出来自己看着办：
(function(){if(!/*@cc_on!@*/0)return;var e =”abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video”.split(‘,’),i=e.length;while(i–){document.createElement(e)}})()
最后在css里面加上这段：
好吧！大前端今天的主题是：HTML5 Shiv
下面是引用Google的html5.js文件，好处就不说了：
<!–[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
将上代码复制到head部分，记住一定要是head部分（因为IE必须在元素解析前知道这个元素，所以这个js文件不能在其他位置调用，否则失效）
当然，你也可以把代码拿出来自己看着办：
(function(){if(!/*@cc_on!@*/0)return;var e =”abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video”.split(‘,’),i=e.length;while(i–){document.createElement(e)}})()
最后在css里面加上这段：
预加载和javascript Image()对象
2011-9-8 18:27:49 阅读110 评论1 82011/09 Sept8
首先是Image()对象的使用，直接贴代码
<html>
<head>
<script language = "JavaScript">
function preloader()
{
heavyImage = new Image();
heavyImage.src = "heavyimagefile.jpg";
}
</script>
</head>
<body onLoad="javascript:preloader()">
<a href="#" onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'">
<img name="img01" src="justanotherfile.jpg"></a>
</body>
</html>以下代码预先加载了heavyimgefile.jpg，当在onMouseOver的时候就不会出现等待的情况。
如果想一次预加载很多张图片可以用以下的代码
<script language="JavaScript">
function preloader()
{
<html>
<head>
<script language = "JavaScript">
function preloader()
{
heavyImage = new Image();
heavyImage.src = "heavyimagefile.jpg";
}
</script>
</head>
<body onLoad="javascript:preloader()">
<a href="#" onMouseOver="javascript:document.img01.src='heavyimagefile.jpg'">
<img name="img01" src="justanotherfile.jpg"></a>
</body>
</html>以下代码预先加载了heavyimgefile.jpg，当在onMouseOver的时候就不会出现等待的情况。
如果想一次预加载很多张图片可以用以下的代码
<script language="JavaScript">
function preloader()
{
CSS的优先级特性
2011-9-6 13:17:00 阅读56 评论0 62011/09 Sept6
选择器一样的情况下后面的会覆盖前面的属性。比如：
p { color: red; }
p { color: blue; }
p元素的元素将是蓝色，因为遵循后面的规则。
然而，你不可能经常用相同的选择器冲突达到目的，当你使用嵌套选择器，合理的冲突来了。比如：
div p { color: red; }
p { color: blue; }
也许你看起来p元素在div元素里面的颜色是蓝色，就像后面p元素的规则，但是第一个选择器的特性却是红色。基本上，一个选择器越多特性，样式冲突的时候将显示它的样式。
一组嵌套选择器的实际特性可以计算出来。基本的，使用ID选择器的值是100，使用class选择器的值是10，每个html选择器的值是1。它们加起来就可以计算出特性的值。
p的特性是1（一个html选择器）
div p的特性是2（两个html选择器）
.tree的特性是10（1个class选择器）
div p.tree的特性是1+1+10=12，（两个html选择器，一个class选择器）
#baobab的特性是100（1个ID选择器）
body #content .alternative p的特性是112（两个html选择器，一个ID选择器，一个类选择器）
按照上面的规则，div p.tree的特性比div p高，body
p { color: red; }
p { color: blue; }
p元素的元素将是蓝色，因为遵循后面的规则。
然而，你不可能经常用相同的选择器冲突达到目的，当你使用嵌套选择器，合理的冲突来了。比如：
div p { color: red; }
p { color: blue; }
也许你看起来p元素在div元素里面的颜色是蓝色，就像后面p元素的规则，但是第一个选择器的特性却是红色。基本上，一个选择器越多特性，样式冲突的时候将显示它的样式。
一组嵌套选择器的实际特性可以计算出来。基本的，使用ID选择器的值是100，使用class选择器的值是10，每个html选择器的值是1。它们加起来就可以计算出特性的值。
p的特性是1（一个html选择器）
div p的特性是2（两个html选择器）
.tree的特性是10（1个class选择器）
div p.tree的特性是1+1+10=12，（两个html选择器，一个class选择器）
#baobab的特性是100（1个ID选择器）
body #content .alternative p的特性是112（两个html选择器，一个ID选择器，一个类选择器）
按照上面的规则，div p.tree的特性比div p高，body
Google面试题, 年薪40万的工程师多少年能在北京买一套200万的房子？！
2011-9-4 19:43:26 阅读92 评论0 42011/09 Sept4
近日，偶尔看到一到谷歌的面试题，百度之，竟然发现一堆人的文章在讨论这个，于是总结于此，或表述下，或感叹下，或愤青下，或调侃下~
如果只以小学数学水平来看题目的话，200/4=5，五年就搞定了呗。但是，科技发展的时代啊，如果都这么简单，还读什么大学，读什么研，搞什么飞机啊？！我们要考虑变数啊，房价还会每年上涨，银行利息还会被调整，加上金融危机，还会通过膨胀使得银行存款缩水，现在终于知道为啥要学函数，学方程式，学微积分吧，就算不能拯救自己，起码死了还知道自己是什么死的吧？！至于你信不信，反正我信了！
好的，先上原题：
现在北京有一套房子，价格200万，假设房价每年上涨10%，一个软件工程师每年固定能
赚40万。如果他想买这套房子，不贷款，不涨工资，没有其他收入，每年不吃不喝不消
费，那么他需要几年才能攒够钱买这套房子？
A, 5年
B, 7年
C, 8年
D, 9年
E, 永远买不起
开始解题：
估计看到E选项，情商不低的人，很轻松就能感觉出答案来了！yes，答案就是永远买不起，这是为什么呢？
两个方法：
1. 随便取几个数，拿计算器算去。
2. 我自己看这个题的思路：假设x年后，正好能买得起房，则方程式为200*(1+0.1)^x = 40x， 变形后，1.1^x=x*1/5. 看吧，左边是一个越跑越高的指数曲线，右边是一个斜率为0.2的直线。两者PK，鹿死谁手？
如果只以小学数学水平来看题目的话，200/4=5，五年就搞定了呗。但是，科技发展的时代啊，如果都这么简单，还读什么大学，读什么研，搞什么飞机啊？！我们要考虑变数啊，房价还会每年上涨，银行利息还会被调整，加上金融危机，还会通过膨胀使得银行存款缩水，现在终于知道为啥要学函数，学方程式，学微积分吧，就算不能拯救自己，起码死了还知道自己是什么死的吧？！至于你信不信，反正我信了！
好的，先上原题：
现在北京有一套房子，价格200万，假设房价每年上涨10%，一个软件工程师每年固定能
赚40万。如果他想买这套房子，不贷款，不涨工资，没有其他收入，每年不吃不喝不消
费，那么他需要几年才能攒够钱买这套房子？
A, 5年
B, 7年
C, 8年
D, 9年
E, 永远买不起
开始解题：
估计看到E选项，情商不低的人，很轻松就能感觉出答案来了！yes，答案就是永远买不起，这是为什么呢？
两个方法：
1. 随便取几个数，拿计算器算去。
2. 我自己看这个题的思路：假设x年后，正好能买得起房，则方程式为200*(1+0.1)^x = 40x， 变形后，1.1^x=x*1/5. 看吧，左边是一个越跑越高的指数曲线，右边是一个斜率为0.2的直线。两者PK，鹿死谁手？
Chorme 本地js不能写 Cookie
2011-8-24 14:19:42 阅读91 评论0 242011/08 Aug24
项目中遇到要用Cookie的地方
兴起，用js写下了
document.cookie="userId=828";
document.cookie="userName=hulk";
var strcookie=document.cookie;
alert(strcookie);
测试
IE OK
Chrome 居然↓
无语于是google之发现其中奥秘
为了安全 google chrome 等浏览器是禁止本地文件写Cookie的即file:///F:/Lord%20community/test/Untitled-2.html这样的以file开头的是不能写本地文件的，于是打开php环境挂起http://127.0.0.1/21/test/Untitled-2.html，OK工作正常。
于是记之。
兴起，用js写下了
document.cookie="userId=828";
document.cookie="userName=hulk";
var strcookie=document.cookie;
alert(strcookie);
测试
IE OK
Chrome 居然↓
无语于是google之发现其中奥秘
为了安全 google chrome 等浏览器是禁止本地文件写Cookie的即file:///F:/Lord%20community/test/Untitled-2.html这样的以file开头的是不能写本地文件的，于是打开php环境挂起http://127.0.0.1/21/test/Untitled-2.html，OK工作正常。
于是记之。