相信很多人都知道的一种处理透明的方法是：opacity。顾名思义，就是透明（opacity），这是css3的一个属性。
我们看下opacity透明效果：（请在现代浏览器下观看）
background-color:#000;opacity:0.5;
仔细看会发现，opacity除了会把背景色设置透明外，还会把容器里的元素都设置透明，比如上面的p。
有时候我们并不想要这样的效果，我们只是希望背景色透明，而里面的内容清晰显示，事实上这种需求会更多一些。
那么，我们就需要另外一个属性——rgba，这也是一个css3属性。下面是rgba实现同样透明度的效果：
background-color: rgba(0,0,0,0.5);
可以看到，里面的内容并没有透明，这就是opacity和rgba设置透明的区别。
最近在前端领域，HTML5可算是一个相当火的新技术， 那么作为html5中最引人瞩目的canvas画板，更是魅力无穷。
canvas是个好东西，随便google一下，就可以看到各种各样令人叹为观止的canvas应用，在介绍我的游戏demo之前，先给大家分享几个超赞的canvas应用，推荐chrome来浏览。
1. Canvas Paint
3. Bomomo
4. Tunneler
5. Lines go all over the place
作为一个业余的页面仔，我意识到，在没有canvas之前，我们在网页画一条斜线也是一件多不容易的事，那么现在，我们竟然可以在网页上做出如此华丽的绘图效果，说canvas是一个质的飞跃真的一点都不为过。
当然canvas不仅仅只是用来绘图，还可以用来做游戏，比如这次的demo——俄罗斯方块。
现在是2011年5月4号的凌晨，我的大三还剩下两个月。大学里总会给人那么一种感觉，大三过完了就好像大学生涯基本上结束了。
借用一下建业的总结性开头，“在这一个想不到干什么的夜晚好好总结一下这一年我究竟做了什么。”
好吧，开始了。
我算是比较幸运的一个人，从进入大学以来，我很快就找到了自己的兴趣，一路走来有很多优秀的前辈带领和指引我，谢谢你们，没有你们，绝没有今天的我。
关于方向，其实很多人也迷茫过，我也一样。没错，其实我最初选定的是后台开发，做一名杯具的程序猿。
不过，方向这东西是可以调整的，一旦确定，就应该竭尽所能坚定地走下去。直到大二下学期，经过深思熟虑，也由于艾维的契机，我果断地踏进了前端这个领域。
好吧，我现在是一名“光荣”的页面仔，虽然我很不喜欢用这个名词，虽然今晚彤姐又这么称呼我了，其实我比较倾向于别人叫我前端开发工程师，暂且让我自恋一下下，哈。
最近了解了下repaint和reflow的相关知识，觉得在页面重构过程中就应该考虑前端开发（js）人员对dom进行操作，能够减轻客户浏览器的鸭梨。
在这里整理了一下相关资料，推荐看帖子底部的文章，如果觉得排版不够好请移步我的博客围观。这是一个讨论帖，抛砖引玉，大家说说自己工作中的经验~
1. 什么是 repaint 和 reflow？
一个页面由两部分组成：
DOM：描述该页面的结构
render：描述 DOM 节点 (nodes) 在页面上如何呈现
当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为 repaint。
如果该次变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 reflow。
这两个过程是很耗费浏览器性能的, 从 IE 系列和 Chrome 渲染页面速度上的差距即可看出渲染引擎计算对应值和呈现并不一定高效, 而每次对元素的操作都会发生 repaints 或 reflow, 因此编写 DOM 交互时如果不注意就会导致页面性能低下.
页面渲染的过程如下：
类是什么？
许多刚接触编程的朋友都可能理解不了类，其实类是对我们这个现实世界的模拟，把它说成“类别”或者“类型”可能会更容易理解一些。比如“人”这种动物就是一个类，而具体某一个人就是“人”这个类的一个实例，“人”可以有许多实例（地球人超过六十亿了），但“人”这个类只有一个。你或许会说那男人和女人不也是人么？怎么只能有一个？其实这里要谈到一个继承的东西，后边才讲，请继续看下去。
如何建立一个类？
在C++中是以class来声明一个类的，JavaScript与C++不同，它使用了与函数一样的function来声明，这就让许多学Jscript的朋友把类与函数混在一起了，在Jscript中函数与类确实有些混，但使用久了自然而然会理解，这篇文章是针对想进攻面向对象编程的朋友而写，就不打算一下子讨论得太深了。
请看下边这个类的定义：
function WuYouUser()
{
this.Name; //名字
}
上边的代码定义了一个WuYouUser（无忧用户）类，它有个属性：Name（名字）。Name就是WuYouUser类的一个属性。
一个类有固定的属性，但类的实例却有不同的属性值，就像我是属于“人”这个类的，性别是男，而我有一个女同学，她也属于“人”类，但她的性别属性值却为女。
那么如何声明某个类的一个实例呢？非常简单：
var Wo = new WuYouUser(); //实例一：“我”
var Biyuan = new WuYouUser(); //实例二：“碧原”（Biyuan哥，不好意思。。。嘿嘿）
类的属性
这个Wo（我）就是WuYouUser类的一个实例，它拥有WuYouUser给它的一切：Name属性、Sex属性以及Age属性，我们可以这样子来设置它的属性：
Wo.Name = ”泣红亭”;
很简单是不是？试着运行
window.document.write(Wo.Name);
看看，是不是输出了我的名字：泣红亭？
同样设置一下碧原兄的属性
Biyuan.Name = ”碧原”;
运行
window.document.write(Biyuan.Name);
可以看到输出了”碧原”，也就说明了Biyuan与Wo同样是WuYouUser类的实例，但却是不同的实体，具有不同的属性值。
属性是可以设置默认值的，无忧里都有记录大家各自发了多少贴子，我们也同样给WuYouUser类添加一个发贴数量的属性ArticleCount
function WuYouUser()
{
this.Name;
this.ArticleCount = 0;
}
一个无忧新用户刚注册完之后他的发贴数量为0，在上边的代码中可以看到直接给属性ArticleCount设置值为0。
可以运行一下这样的代码：
var Wo = new WuYouUser();
window.document.write(Wo.ArticleCount);
可以看到输出了0，说明ArticleCount属性被我们成功设置默认值为0
最近为数据挖掘的大作业写了个网页版的数据生成器，用于人工制造测试数据，废话不多，发链接~
tysonpan.com/uploads/data.html
代码不多，里面有注释，应该能看懂~
改进记录：
2010-12-27 修正了在Firefox下无法正确获取event事件和offset值而导致的创建数据点失败问题
2010-12-28 改进了启动扫描绘点时的提示框，取消alert提示，换成浮出框
2010-12-28 增加TXT文件保存功能，目前只支持IE浏览器
第一次听到“CSS模块化”这个词是在WebReBuild的第四届“重构人生”年会上，当时我还想，“哈，CSS也有模块化，我没听错吧？”事实上，我没听错，你也没看错，早就有CSS模块化这个概念了。之所以我把这个拿出来讨论，是因为最近艾维的一个算是比较大的项目——聪明的油出现了一些重构上的危机，因此引发了我们对页面重构中的CSS进行模块化的思考。
首先，什么是CSS模块化？在谈CSS模块化之前我们先看一下百度百科对模块化的解释：
“模块化是指解决一个复杂问题时自顶向下逐层把系统划分成若干模块的过程。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。在系统的结构中，模块是可组合、分解和更换的单元。”
我对上面一段话的理解是，模块化就像我们玩乐高积木一样，一个积木就是一个单元，可以通过组合不同的积木来搭建一个玩具模型。对于一个玩具模型，也可以更换部分积木而迅速变成另一个模型。而CSS模块化的关键，就是如何合适地构建这些单元，也就是一个一个的class，以及如何灵活运用这些单元来达到我们所要的呈现效果。
说了一堆繁杂的话，连我自己都觉得乏味。作为一个热爱编程的页面仔，我想借用面向对象的三大特性来说明CSS模块化——封装、继承、多态。
继续阅读 »
在2%网站www.2percenthk.com上看到的一个图片放大效果，他是用flash做的，建业问起我，如果不用flash也能做到这样吗？
我第一个反应是，CSS3 的background-size，看来腾讯笔试的附加题对我的影响真是不小啊，现在看到这些特别的效果第一时间就想到CSS3。
但是一查手册，发现background-size的支持性不太好，IE和FF都不支持这个属性，这就说明目前来说用这个方法还是不太可行的。
既然background-size不行，那么只能用img来引入图片了，也就是说，我们至少需要两个标签。
html代码：
<div class="window">
<img src="pic.jpg" class="pic" id="pic" />
</div>
因为图片在放大过程中需要不断地调整位置使其居中，而且放大后多出来的部分要隐藏调，所以我对图片采用了绝对定位
CSS代码：
.window{
width:516px;
height:800px;
position:relative;
border:#9C0 3px solid;
overflow:hidden;
}
.pic{
position:absolute;
width:516px;
height:800px;
left:50%;
top:50%;
margin:-400px 0 0 -258px;
}
接下来就是javascript的问题了，像这样的放大效果，直接用javascript来写是相当繁琐的，而且兼容性的问题也会很棘手，因此很自然地就会想到用jquery，Write less,Do more，精髓所在啊~
主要思路就是用jquery的animate方法，在一定时间内调整图片的大小并时刻保持居中，鼠标移入时放大图片，鼠标移出时恢复原来的大小。
上一篇文章说到点击区域被限制在文本中的问题，这里列举第二种情况并给出解决方法。
情况二（position和background）：
HTML Code:
<div><a href="#">Foo</a></div>
CSS Code:
div {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 200px;
border: 1px solid #000;
}
a {
display: block;
width: 500px;
padding: 50px;
}
a:hover {
background: #ddd;
}
请看demo：demo
现在我们有一个绝对定位的div和一个拥有了布局的a，还有一个a的伪类，用来测试什么时候进入了有效的动作区域。可以看到，IE6下，这个区域只在文本部分，而在标准浏览器中，这个区域是a元素所占区域的全部。
解决办法：
不知道你是否遇到过这样的情况，设置了一个可点击的区域，理论上整个区域都是可以点击，但是实际上却只有区域中的文字部分才可以点击。如果你曾经遇到过或者正在为这种情况而烦恼，又或者你对这个问题颇感兴趣，那么请继续往下看。
其实，这是IE6（或更低版本）的一个bug，叫做“部分点击”，这里列举两种会出现这个bug的情况，并给出解决方案。
情况一（float和haslayout）：
在一个应用了浮动（float）的容器中，包含一个a标签，这是一个很常见的情况。然后呢，此a元素应用了display:block属性来扩展宽度以增加可供点击的区域。这个时候，问题就出现了。IE6（或更低版本）会认为，可点击的区域并不是你预料中的那样，从而自主地把可点击区域限制到文本中。我们看一下demo。
HTML Code:
<div>
<a href="#">Demo link!</a>
</div>
CSS Code:
div {
float: left;
width: 90%;
}
a {
display: block;
text-align: center;
}
从demo中我们可以很明显地看到，在IE6中，a链接的区域只是在文本中，而其他标准浏览器中，a链接的区域是整一行。
解决办法：