Haozi - haozi.cn
General Information:
Latest News:
使用JavaScript+PNG模拟GIF动画 13 Jul 2010 | 01:06 am
在Google首页经常可以看到一些小动画，一般第一感觉会认为是GIF动画，其实稍微分析下代码就不难看出是用JavaScript+PNG实现的。 简述下其相对GIF动画的优势： 可以实现交互，用JS控制动画的播放和停止等，GIF动画不行； PNG图片的压缩质量要好于GIF，大小会小于GIF，而且可以实现半透明，避免毛边的出现，GIF不行； 可以在PNG中包含其他ICON，从而减少HTTP请求...
理清offsetHeight offsetTop offsetY scrollHeight scrollTop clientHeight clientY screenY Y 2 Jul 2010 | 06:21 am
先看张网络上的图，来源不明，从使用的浏览器看应该很老的图了，不过还是挺经典的，非常好的诠释了这些属性的区别。 整理的文字说明： offsetHeight：元素的高度（可见部分） offsetTop：当前元素的外边界（可见部分）到其父元素的内边界（可见部分）的距离 offsetY(IE)/layerY(FF)：事件触发时鼠标指针相对于目标元素外边界（可见部分）的坐标位置 scrollHei...
HTML中的SEO基本规则 24 Jun 2010 | 05:26 am
SEO虽然是项独立技能， 但作为前端还是需要了解和熟悉的，相信搜索引擎想要的，也是用户想要的，所以就算从用户角度出发，也要掌握SEO技术。下面就是对SEO有利的HTML标 签，算是入门级的东西但又很重要。从SEOWHY上看到的文章，把关键部分提取了下，就当做个笔记，原文在这里。 <!–页面注释–> 虽然是注释，但搜索引擎也会读取该部分内容，所以可以放置关键词，但不要过多使用，否则会被当作作弊。...
更贴近语义化的Tab切换 23 Jun 2010 | 05:39 am
不知道什么时候开始养成了这样一个洁癖，就是要让写完的页面在去掉css后同样能拥有非常好的阅读性，这样做可能是有些得不偿失，但如果优化的好，对搜索引擎抓取和一些特殊设备的读取还是有利的（当然这个还有待考究）。 就拿最近写的一个Tab切换效果来说，通常情况下，Tab的标题和对应的列表是分开的。比如腾讯的这个Tab切换效果，在渲染后的情况是： 屏蔽css后： 所以如果要让页面在屏蔽css后还能让标...
用JS实现文章归档的导航菜单 17 Jun 2010 | 09:09 pm
用JS简单的模拟了文章归档的导航菜单，无需读取数据库。 缺点是不能显示文章数量，对搜索引擎也不够友好。 提示：你可以修改代码后再运行。
用jQuery做的一个数据地图 12 Jun 2010 | 06:22 pm
给朋友做的一个地图，要在鼠标移到城市名字上时显示相应城市的新闻数量的提示，而且提示能跟随鼠标移动。 没什么技术含量，主要是在城市名字定位上繁杂点，然后行为效果是用jQuery实现，一行代码就搞定，JQ真是省油的灯。 点击这里查看效果 两个小知识点： jQuery已处理好了event的兼容性，所以无需判断是用event还是window.event。 jQuery的pageX兼容IE，可以得...
[转]CSS定位详解: static relative absolute float 7 Jun 2010 | 06:48 pm
例子胜过废话，请猛击下面： 10步掌握CSS布局定位： position static relative absolute float 原文：Learn CSS Positioning in Ten Steps 翻译：10步掌握CSS布局定位
display:inline-block的兼容 3 Jun 2010 | 07:23 pm
目前除了IE6和IE7两个活宝外，其他主流Browser（Chrome,Safari,opera,IE8,FF3等）都已开始支持display:inline-block，所以基本仅需要针对IE6和IE7做兼容处理，网上已经说烂了，还是留个笔记吧，此法对IE5.5也有效。 方法一： 方法二：
浅谈“em,%,纯数字”3个尺寸单位的区别 31 May 2010 | 09:10 pm
em 1em=1*父元素字体尺寸 2em=2*父元素字体尺寸 3em=3*父元素字体尺寸 …（以此类推） 如果所有父元素都没有设定字体尺寸，则“父元素字体尺寸”换成浏览器的默认字体尺寸（一般来说都是16px）。 当然em还可以用于容器尺寸和文本缩进，设定的尺寸是根据当前元素（如果没有则查找父元素）的字体尺寸计算的。比如 em的优势是，在改变字体尺寸的基数时，浏览器也会相应的调整后代元...
[转]如何使CSS渲染更高效 27 May 2010 | 09:24 pm
原文：Efficiently Rendering CSS 翻译：如何使CSS渲染更高效 （为阅读更通顺，稍作了些修改） 我承认我并不经常想这样一个问题：我们写的css的效率如何，浏览器渲染速度又如何？这本应该是浏览器开发者应该关心的。Mozilla有一篇文章： about best practices 。 Google 当然也很关心这个问题，他们也有这样一篇文章：Optimize brows...
