博客园_JayChow

郁闷，郁闷

2011-01-24T14:53:00Z

这几个月忙于工作，博客疏写了，罪过罪过。一定速速补上，补上。

谴责下自己。

本文链接

Js组件的一些写法（一）

2010-09-09T16:08:00Z

今天看了rank的一篇javascript脚本控件topic，突然想总结一下一些写JS组件的方法，或者说一些不同人的不同coding style。

首先看下Prototype里的写法：

如果你不喜欢上面这一大堆Class.create之类的，你也可以这样：

function A() { } //var A = function(){}
A.prototype = {
init: function(msg) {
this.msg = msg;
},
fn: function() {
alert(this.msg);
}
}
var a = new A();
a.init("myMsg");
a.fn();

当然，也可以把this.msg的初始化放到function A(msg){this.msg=msg;}里。总之你会发现这样调用很麻烦，并且参数是固定对应好的。

你如果既不愿搞一大堆Class.create，也不愿调用不方便，那就把Prototype里的var Class = {...} 和 var A = Class.create();合并起来。得到：

function A() {
this.init.apply(this, arguments);
}

A.prototype = {
init: function(msg) {
this.msg = msg;
},
fn: function() {
alert(this.msg);
}
}

var a = new A("myMsg");
a.fn();

看上去干净了许多，但是如果你的库里有很多组件，则每个组件都要写一遍this.init.apply(this, arguments); 如果用Class.create的话，则只要写一个Class，然后每个组件执行下Class.create()即可。当然，每个组件都写一遍this.init.apply(this, arguments);也没啥不好的，还是看个人喜好了。另外写原型方法是合在一起还是分开来写也是个人喜好，出于封装的角度，合一起好，但是分开有时候显的更清晰。譬如A.prototype.init=function(msg){...} A.prototype.fn=function(){...}

然后还有人喜欢这样去写组件：

这边一定要把A构造的对象this放到临时变量_this中哦，因为运行时，privateFn1的函数体内this实际是{fn1:...,fn2:...}这样的匿名对象，你可以用this.hasOwnProperty("fn1")去测试。this是在运行时才有意义的一个东西。另外这种方法每个对象都会有privateFn1 和 privateFn2的副本，这种方法不太好。

（未完待续，下面会讲些不同框架的一些写法）

本文链接

腾讯的一个不固定高度消息的滚动特效

2010-08-31T14:44:00Z

8月最后1天，赶紧补篇博客。贴个最近看到的腾讯的特效，写的还可以。先看效果。

<div> <table width="320" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse;border:1px solid black;"> <tr> <td valign="top"> <div class="Contentnr auto"><style> #msg_weibo {width:300px;height:186px;*height:186px;_height:170px;margin:10px auto 0;zoom:1; overflow:hidden;font-size:12px;line-height:20px;margin-bottom:4px;background:#ffffff;}#msg_weibo a{margin-right:6px;color:#003C71;text-decoration:none;}#msg_weibo a:hover{color:#c00;text-decoration:underline;}#msg_weibo img{margin-top:2px;}#msg_weibo span{color: #888;}#msg_weibo div{padding:8px 0 11px 0 ;overflow:hidden;zoom:1;background:url(http://mat1.gtimg.com/worldcup/duanzi/duanz6.gif) left bottom repeat-x}#msg_weibo span a{display:block;}#msg_weibo img{float:left;width:50px; height:50px; padding:2px; border:#D6D6D6 1px solid;}#msg_weibo p{float:left;width:295px; padding-left:5px; }</style><div id="msg_weibo"><div class="con"><p>世锦赛第一场，打得还不错，希望不是昙花一现，要战，便战至消亡！</p></div><div class="con"><p>对刘伟真的无语了关键时刻不是失误就是浪投，男篮要想取得比赛的胜利后卫线上必须得加强防守和减少失误</p></div><div class="con"><p>男篮，加油</p></div><div class="con"><p>昨天竞彩网让分胜负是希腊让中国20分！…中国打得不错！死了一大片彩民</p></div><div class="con"><p>有希望</p></div><div class="con"><p>晚上的比赛将是男篮在这届世锦赛的首胜。加油</p></div><div class="con"><p>今晚的中国男篮让我刮目相看了，也完全出乎我的意料！积极主动、神勇自信、信赖队友、坚持自己的打法、不慌张，这简直是一支梦幻的国家队，如果个人技术能再好一点，还真有世界强队的样子。能跟前欧洲冠军希腊队打成这样，真的很佩服，不得不竖大拇哥。易建联、王治郅，个个好样的！</p></div><div class="con"><p><a target="_blank">刘伟其实这场还行，只是手感不好，如果那两个投篮进了肯定又有特多人说他是好控位了，而且还会说是救了中国，所以不要总怪刘伟，还是因为中国整体实力和希腊比不了，不过这场打的挺好了，这么打下去我相信中国会出线的</p></div><div class="con"><p>鄙视那些自以为了不起的人，同样是中国人，你那么凶不去世锦赛上牛比？</p></div><div class="con"><p>刘炜我草你妈！死你妈老家去！没有姚你什么东西都不是！烂投王</p></div></div> </div></td></tr></table><script language="javascript"> var $ = function (d){ typeof d == "string" &&(d = document.getElementById(d)); return $.fn.call(d);};$.fn = function (){this.addEvent = function (sEventType,fnHandler){if (this.addEventListener) {this.addEventListener(sEventType, fnHandler, false);} else if (this.attachEvent) {this.attachEvent("on" + sEventType, fnHandler);} else {this["on" + sEventType] = fnHandler;}}this.removeEvent = function (sEventType,fnHandler){if (this.removeEventListener) {this.removeEventListener(sEventType, fnHandler, false);} else if (this.detachEvent) {this.detachEvent("on" + sEventType, fnHandler);} else { this["on" + sEventType] = null;}}return this;};var Class = {create: function() {return function() { this.initialize.apply(this, arguments); }}};var Bind = function (obj,fun,arr){return function() {return fun.apply(obj,arr);}}var Marquee = Class.create();Marquee.prototype = { initialize: function(id,name,out,speed) { this.name = name;this.box = $(id);this.out = 3;//滚动间隔时间,单位秒this.speed = speed;this.d = 1;this.box.style.position = "relative";this.box.scrollTop = 0;var _li = this.box.firstChild;while(typeof(_li.tagName)=="undefined")_li = _li.nextSibling;this.lis = this.box.getElementsByTagName(_li.tagName);this.len = this.lis.length;for(var i=0;i<this.lis.length;i++){ var __li = document.createElement(_li.tagName);__li.innerHTML = this.lis[i].innerHTML;this.box.appendChild(__li);//cloneNodeif(this.lis[i].offsetTop>=this.box.offsetHeight)break;}this.Start();this.box.addEvent("mouseover",Bind(this,function(){clearTimeout(this.timeout);},[]));this.box.addEvent("mouseout",Bind(this,this.Start,[])); }, Start:function (){ clearTimeout(this.timeout); this.timeout = setTimeout(this.name+".Up()",this.out*1000) }, Up:function(){ clearInterval(this.interval); this.interval = setInterval(this.name+".Fun()",10); }, Fun:function (){ this.box.scrollTop+=this.speed; if(this.lis[this.d].offsetTop <= this.box.scrollTop){ clearInterval(this.interval);this.box.scrollTop = this.lis[this.d].offsetTop;this.Start();this.d++; } if(this.d >= this.len + 1){ this.d = 1; this.box.scrollTop = 0; } }};$(window).addEvent("load",function (){marquee = new Marquee("msg_weibo","marquee",1,2);});</script></div>

看关键的js code：

实现思路与以前的文字滚动是一样的，都是先充满当前容器，再通过scrollTop++往上滚的，只不过他是每次滚动的距离不是固定的，是取当前滚动消息的高度。由于scrollTop（滚出当前可视区域的高度）和offsetTop（距离父节点顶部的距离，常用于取某元素在页面的坐标位置）的区别，所以通过 if(this.lis[this.d].offsetTop <= this.box.scrollTop)来判断是否滚动完上条消息，需要停顿下了。

我觉得亮点之处在于$的写法。通常Prototype里也就取下obj||document.getElementById('objId')，他这里除此外还帮obj绑定了一些方法。他的作用是不是类似于原型扩展String、Array等对象的方法呢。这个可以借鉴。

另外，他初始化时填充容器时用document.createElement->赋innerHTML->appendChild来做，我觉的不如直接cloneNode(true)->appendChild好，如不对，欢迎指正。

主要还是填下这个月的坑，哈哈。

本文链接

三栏宽度自适应布局及等高的思考

2010-07-27T13:06:00Z

一. 实现三栏宽度自适应

第一种方法：

首先是一种不推荐的做法，用绝对定位实现。

实现要点：左栏left、右栏right设为绝对定位，分别设置width。左栏设置left和top，右栏设置right和top。自适应的中间栏设置为相对定位，设置margin:0 200px。

#left
{
background-color: #E79F6D;
width: 200px;
position: absolute;
left: 5px;
top: 105px;
}
#center
{
background-color: #D6D6D6;
margin: 0 200px;
top: 0px;
position: relative;
}
#right
{
background-color: #77BBDD;
width: 200px;
right: 5px;
top: 105px;
position: absolute;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <mce:style type="text/css"></mce:style><style type="text/css" _mce_bogus="1"></style></head><body> <div id="main"> <div id="header"> <h2> header</h2> </div> <div id="left"> <div> 两海龟快活后，相约来年再相聚，第二年公龟来到见母龟已在等待，但母龟却大骂：你TMD爽完了也不把我翻过来，都一年了 </div> </div> <div id="center"> 中国人喜欢凑热闹是出名的，话说人行道上一位仁兄抬头望天，没过多久，越来越多的人聚拢在他的周围一起望天，最后把警察叔叔引来了，警察叔叔问，看什么呢？旁边的人回答：就是不知道看什么，所以在看呀！然后警察叔叔一层层的问进去，问到最先望天的仁兄：你看什么呢？仁兄回答道：出鼻血不可以啊？！读书时一直暗恋她，但没勇气表白，更没胆量碰她。毕业后，她已经结婚了，老公跟我是同学。那天下午，她抱着娃娃在喂奶，我找了个很好的借口。我走到她面前，一把两手按住她的MIMI，然后跟她娃娃说，喊叔叔，不喊不给吃! 波兰总统：我坠机了，郁闷啊。林彪回复：沙发，同楼主，悲剧。金正日跟贴：只坐火车的飘过，安全。张作霖跟帖：楼上sb。 </div> <div id="right"> 中国人喜欢凑热闹是出名的 </div> <div id="footer"> <h2> footer</h2> </div> </div></body></html>

这种绝对定位的做法比较死板，牵一发而动全身，而且如果非自适应的栏高度超过自适应的栏高度，并不能撑开底下的footer，谁叫他是绝对定位呢。

第二种方法：

用浮动实现。

实现要点：三栏均为float: left。中间栏设width为100%，设margin:0 -200px。margin-left和margin-right为-200px意味着原本应在的位置可以向左和向右再占200px（width仍然占着100%的宽度，只是不用换行去占这么大地了），则此时3栏位于同一行，且左栏与中间栏左侧重叠，右栏与中间栏右侧重叠。只要再将中间栏的数据左右往里各挤200px即可。所以中间栏中再加了个div，设其margin:0 200px即可。

#left
{
width: 200px;
float: left;
background-color: #E79F6D;
}
#center
{
margin: 0 -200px;
width: 100%;
float: left;
}
#center .inner
{
margin: 0 200px;
background-color: #D6D6D6;
}
#right
{
width: 200px;
float: left;
background-color: #77BBDD;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <mce:style type="text/css"></mce:style><style type="text/css" _mce_bogus="1"></style></head><body> <div id="main" style="overflow: hidden;" _mce_style="overflow: hidden;"> <div id="header"> <h2> header</h2> </div> <div id="left"> 两海龟快活后，相约来年再相聚，第二年公龟来到见母龟已在等待，但母龟却大骂：你TMD爽完了也不把我翻过来，都一年了 </div> <div id="center"> <div class="inner "> 中国人喜欢凑热闹是出名的，话说人行道上一位仁兄抬头望天，没过多久，越来越多的人聚拢在他的周围一起望天，最后把警察叔叔引来了，警察叔叔问，看什么呢？旁边的人回答：就是不知道看什么，所以在看呀！然后警察叔叔一层层的问进去，问到最先望天的仁兄：你看什么呢？仁兄回答道：出鼻血不可以啊？！读书时一直暗恋她，但没勇气表白，更没胆量碰她。毕业后，她已经结婚了，老公跟我是同学。那天下午，她抱着娃娃在喂奶，我找了个很好的借口。我走到她面前，一把两手按住她的MIMI，然后跟她娃娃说，喊叔叔，不喊不给吃! 波兰总统：我坠机了，郁闷啊。林彪回复：沙发，同楼主，悲剧。金正日跟贴：只坐火车的飘过，安全。张作霖跟帖：楼上sb。 </div> </div> <div id="right"> 中国人喜欢凑热闹是出名的 </div> <div id="footer"> <h2> footer</h2> </div> </div></body></html>

第三种方法：

与第二种方法利用中间栏的margin实现不同，这里利用三栏外容器的padding实现。当然他们的中间栏都是100%的。

你可以去看一种备受推崇的圣杯布局，点击这里查看原文译文。下面代码与原文代码不完全一致，但思想是一致的，另外那篇文章的code有个IE7的BUG，我改了下hack。

实现要点：首先设置装着3栏的容器container的padding:0 150px 0 200px（ps:左栏width是200px，右栏width是150px）。由于中间栏是第一个DIV，且设了中间DIV的width:100%。则下面要做的就是：

1. 把左栏DIV放到container的padding-left的空白处：设margin-left: -100%（这个100%是container的width的100%，当然不包含padding），则往左移动了100%的距离，但仍然在padding-left空白处的右侧，所以再利用相对定位，使左移200px，即left:-200px（个人习惯这个），或者right:200px。

2. 把右栏DIV放到container的padding-right的空白处：同上，先使同行显示则设margin-left: -150px，再设right:-150px移动到正确位置。

#container
{
padding: 0 150px 0 200px;
}
#container .column
{
position: relative;
float: left;
}
#center
{
width: 100%;
}
#left
{
width: 200px;
left: -200px;
margin-left: -100%;
}
#right
{
width: 150px;
margin-left: -150px;
right: -150px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>The Holy Grail of Layouts: Example #1: A List Apart</title> <style type="text/css"> body { min-width: 550px; /* 2 x left width + right width */ } #container { padding: 0 150px 0 200px; } #container .column { position: relative; float: left; } #center { width: 100%; } #left { width: 200px; left: -200px; margin-left: -100%; } #right { width: 150px; margin-left: -150px; right: -150px; } #footer { clear: both; } /*IE6 7 Fix*/ #left { left:-200px; *left: 150px; /* RC width */ left:-200px\0; } /*Just for Looks*/ body { margin: 0; padding: 0; background: #FFF; } #header, #footer { font-size: large; text-align: center; padding: 0.3em 0; background: #999; } #left { background: #66F; } #center { background: #DDD; } #right { background: #F66; } #container .column { padding-top: 1em; text-align: justify; } </style></head><body> <div id="header"> This is the header.</div> <div id="container"> <div id="center" class="column"> <h1> This is the main content.</h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> </div> <div id="left" class="column"> <h2> This is the left sidebar.</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> </div> <div id="right" class="column"> <h2> This is the right sidebar.</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> </div> </div> <div id="footer"> This is the footer.</div></body></html>

第四种方法：

实现要点：这种方法其实和第二种相似，三栏均为float: left。中间栏设width为100%。由于中间栏是第一个DIV，故不需要设置它的margin负值使其位于第一行。此时左栏和右栏将换行显示。通过设置左栏的 margin-left: -100%;和右栏的margin-left: -150px;使三栏处于同一行显示。此时刚好处于合理位置故无需设为相对定位进行偏移，这一点不同于第三种方法。

注意：为了兼容IE6，container的zoom:1不可少，它是为了使元素支持haslayerout，常常IE6出现误差不兼容时，应先试下zoom:1是否可以解决。

.container
{
zoom: 1;
}
.column
{
float: left;
}
.center
{
width: 100%;
background: #D6D6D6;
}
.box
{
margin: 0 150px 0 200px;
}
.left
{
margin-left: -100%;
width: 200px;
background: #E79F6D;
}
.right
{
margin-left: -150px;
width: 150px;
background: #77BBDD;
}

<!DOCTYPE html><html><head> <meta charset="gbk" /> <title>三列等高。中间列优先</title> <style type="text/css"> body, h2 { margin: 0; } body { min-width: 550px; } /* h2去除FF等body上面的空白*/#main { margin: 5px; } #header { height: 100px; background-color: gray; } #footer { height: 50px; background-color: gray; clear: both; } .container { zoom: 1; } .column { float: left; } .center { width: 100%; background: #D6D6D6; } .box { margin: 0 150px 0 200px; } .left { margin-left: -100%; width: 200px; background: #E79F6D; } .right { margin-left: -150px; width: 150px; background: #77BBDD; } </style></head><body> <div id="main"> <div id="header"> <h2> header</h2> </div> <div class="container"> <div class="center column"> <div class="box"> 中国人喜欢凑热闹是出名的，话说人行道上一位仁兄抬头望天，没过多久，越来越多的人聚拢在他的周围一起望天，最后把警察叔叔引来了，警察叔叔问，看什么呢？旁边的人回答：就是不知道看什么，所以在看呀！然后警察叔叔一层层的问进去，问到最先望天的仁兄：你看什么呢？仁兄回答道：出鼻血不可以啊？！读书时一直暗恋她，但没勇气表白，更没胆量碰她。毕业后，她已经结婚了，老公跟我是同学。那天下午，她抱着娃娃在喂奶，我找了个很好的借口。我走到她面前，一把两手按住她的MIMI，然后跟她娃娃说，喊叔叔，不喊不给吃! 波兰总统：我坠机了，郁闷啊。林彪回复：沙发，同楼主，悲剧。金正日跟贴：只坐火车的飘过，安全。张作霖跟帖：楼上sb。 </div> </div> <div class="left column"> 两海龟快活后，相约来年再相聚，第二年公龟来到见母龟已在等待，但母龟却大骂：你TMD爽完了也不把我翻过来，都一年了 </div> <div class="right column"> 中国人喜欢凑热闹是出名的 </div> </div> <div id="footer"> <h2> footer</h2> </div> </div></body></html>

二. 实现等高

个人觉得，其实很多网页设计是不需要等高的，通常可以用背景色搞定，或者很多背景色本来就是空白的。想想当border为1px的DIV等高了是多么丑吧。当然也有要用到等高的，如果css调不出来可以用上必杀招：JS。这里讲的是用CSS实现等高。通常就是用margin-bottom负值和padding-bottom正值抵消来实现。

譬如说：上面第三张方法圣杯布局：只要在3栏外面容器加上overflow:hidden，然后分别给三栏加上：margin-bottom:-10000px;padding-bottom:10000px;即可。但是有个BUG：IE7不work，至于为什么我不知道，欢迎各位大大指教。如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>The Holy Grail of Layouts: Example #1: A List Apart</title> <style type="text/css"> body { min-width: 550px; /* 2 x left width + right width */ } #container { padding: 0 150px 0 200px; overflow:hidden; } #container .column { position: relative; float: left; margin-bottom:-10000px; padding-bottom:10000px; } #center { width: 100%; } #left { width: 200px; left: -200px; margin-left: -100%; } #right { width: 150px; margin-left: -150px; right: -150px; } #footer { clear: both; } /*IE6 7 Fix*/ #left { left:-200px; *left: 150px; /* RC width */ left:-200px\0; } /*Just for Looks*/ body { margin: 0; padding: 0; background: #FFF; } #header, #footer { font-size: large; text-align: center; padding: 0.3em 0; background: #999; } #left { background: #66F; } #center { background: #DDD; } #right { background: #F66; } #container .column { padding-top: 1em; text-align: justify; } </style></head><body> <div id="header"> This is the header.</div> <div id="container"> <div id="center" class="column"> <h1> This is the main content.</h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> </div> <div id="left" class="column"> <h2> This is the left sidebar.</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> </div> <div id="right" class="column"> <h2> This is the right sidebar.</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p> </div> </div> <div id="footer"> This is the footer.</div></body></html>

对于第四种方法，使用同样的方法：

<!DOCTYPE html><html><head> <meta charset="gbk" /> <title>三列等高。中间列优先</title> <style type="text/css"> body, h2 { margin: 0; } body { min-width: 550px; } /* h2去除FF等body上面的空白*/ #main { margin: 5px; } #header { height: 100px; background-color: gray; } #footer { height: 50px; background-color: gray; clear: both; } .container { overflow: hidden; zoom: 1; } .column { float: left; padding-bottom: 10000px; margin-bottom: -10000px; } .center { width: 100%; background: #D6D6D6; } .box { margin: 0 150px 0 200px; } .left { margin-left: -100%; width: 200px; background: #E79F6D; } .right { margin-left: -150px; width: 150px; background: #77BBDD; } </style></head><body> <div id="main"> <div id="header"> <h2> header</h2> </div> <div class="container"> <div class="center column"> <div class="box"> 中国人喜欢凑热闹是出名的，话说人行道上一位仁兄抬头望天，没过多久，越来越多的人聚拢在他的周围一起望天，最后把警察叔叔引来了，警察叔叔问，看什么呢？旁边的人回答：就是不知道看什么，所以在看呀！然后警察叔叔一层层的问进去，问到最先望天的仁兄：你看什么呢？仁兄回答道：出鼻血不可以啊？！读书时一直暗恋她，但没勇气表白，更没胆量碰她。毕业后，她已经结婚了，老公跟我是同学。那天下午，她抱着娃娃在喂奶，我找了个很好的借口。我走到她面前，一把两手按住她的MIMI，然后跟她娃娃说，喊叔叔，不喊不给吃! 波兰总统：我坠机了，郁闷啊。林彪回复：沙发，同楼主，悲剧。金正日跟贴：只坐火车的飘过，安全。张作霖跟帖：楼上sb。 </div> </div> <div class="left column"> 两海龟快活后，相约来年再相聚，第二年公龟来到见母龟已在等待，但母龟却大骂：你TMD爽完了也不把我翻过来，都一年了 </div> <div class="right column"> 中国人喜欢凑热闹是出名的 </div> </div> <div id="footer"> <h2> footer</h2> </div> </div></body></html>

呃，就说这么多了。

本文链接

前端开发必须知道的JS（二）闭包及应用

2010-07-06T00:25:00Z

在前端开发必须知道的JS（一）原型和继承一文中说过下面写篇闭包，加之最近越来越发现需要加强我的闭包应用能力，所以此文不能再拖了。本文讲的是函数闭包，不涉及对象闭包（如用with实现）。如果你觉得我说的有偏差，欢迎拍砖，欢迎指教。

一. 闭包的理论

首先必须了解以下几个概念：

执行环境

每调用一个函数时（执行函数时），系统会为该函数创建一个封闭的局部的运行环境，即该函数的执行环境。函数总是在自己的执行环境中执行，如读写局部变量、函数参数、运行内部逻辑。创建执行环境的过程包含了创建函数的作用域，函数也是在自己的作用域下执行的。从另一个角度说，每个函数执行环境都有一个作用域链，子函数的作用域链包括它的父函数的作用域链。关于作用域、作用域链请看下面。

作用域、作用域链、调用对象

函数作用域分为词法作用域和动态作用域。

词法作用域是函数定义时的作用域，即静态作用域。当一个函数定义时，他的词法作用域就确定了，词法作用域说明的是在函数结构的嵌套关系下，函数作用的范围。这个时候也就形成了该函数的作用域链。作用域链就是把这些具有嵌套层级关系的作用域串联起来。函数的内部[[scope]]属性指向了该作用域链。

动态作用域是函数调用执行时的作用域。当一个函数被调用时，首先将函数内部[[scope]]属性指向了函数的作用域链，然后会创建一个调用对象，并用该调用对象记录函数参数和函数的局部变量，将其置于作用域链顶部。动态作用域就是通过把该调用对象加到作用域链的顶部来创建的，此时的[[scope]]除了具有定义时的作用域链，还具有了调用时创建的调用对象。换句话说，执行环境下的作用域等于该函数定义时就确定的作用域链加上该函数刚刚创建的调用对象，从而也形成了新的作用域链。所以说是动态的作用域，并且作用域链也随之发生了变化。再看这里的作用域，其实是一个对象链，这些对象就是函数调用时创建的调用对象，以及他上面一层层的调用对象直到最上层的全局对象。　

譬如全局环境下的函数A内嵌套了一个函数B，则该函数B的作用域链就是：函数B的作用域—>函数A的作用域—>全局window的作用域。当函数B调用时，寻找某标识符，会按函数B的作用域—>函数A的作用域—>全局window的作用域去寻找，实际上是按函数B的调用对象—>函数A的调用对象—>全局对象这个顺序去寻找的。也就是说当函数调用时，函数的作用域链实际上是调用对象链。

闭包

在动态执行环境中，数据实时地发生变化，为了保持这些非持久型变量的值，我们用闭包这种载体来存储这些动态数据（看完下面的应用就会很好的体会这句话）。闭包的定义：所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

闭包就是嵌套在函数里面的内部函数，并且该内部函数可以访问外部函数中声明的所有局部变量、参数和其他内部函数。当该内部函数在外部函数外被调用，就生成了闭包。（实际上任何函数都是全局作用域的内部函数，都能访问全局变量，所以都是window的闭包）

譬如下面这个例子：

垃圾回收机制：如果某个对象不再被引用，该对象将被回收。

再结合前面所讲的一些概念，在执行var test=f(1)时创建了f的调用对象，这里暂且记作obj，执行完后虽然退出了外部执行环境，但内部函数inner被外部函数f外面的一个变量test引用。由于外部函数创建的调用对象obj有一个属性指向此内部函数，而现在这个内部函数又被引用，所以调用对象obj会继续存在，不会被垃圾回收器回收，其函数参数x和局部变量a都会在这个调用对象中得以维持。虽然调用对象不能被直接访问，但是该调用对象已成为内部函数作用域链中的一部分，可以被内部函数访问并修改，所以执行test()时，可以正确访问x和a。所以说，当执行了外部函数时，生成了闭包，被引用的外部函数的变量将继续存在。

二. 闭包的应用

应用1：

这个是我在用js模拟排序算法过程遇到的问题。我要输出每一次插入排序后的数组，如果在循环中写成

setTimeout(function() { $("proc").innerHTML += arr + "<br/>"; }, i * 500);

会发现每次输出的都是最终排好序的数组，因为arr数组不会为你保留每次排序的状态值。为了保存会不断发生变化的数组值，我们用外面包裹一层函数来实现闭包，用闭包存储这个动态数据。下面用了2种方式实现闭包，一种是用参数存储数组的值，一种是用临时变量存储，后者必须要深拷贝。所有要通过闭包存储非持久型变量，均可以用临时变量或参数两种方式实现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script type="text/javascript"></script></head><body> <div> var a = [4, 5, 6, 8, 7, 9, 3, 2, 1, 0];</div> <div> <input type="button" value="插入排序" onclick="Sort.Insert();" /> </div> Proc:<br /> <div id="proc"> </div> </body></html>

应用2：

这个是无忧上的例子（点击这里查看原帖），为每个<li>结点绑定click事件弹出循环的索引值。起初写成

id.onclick = function(){

alert(i);

}

id.onclick = function(){alert(i);}

发现最终弹出的都是4，而不是想要的 1、2、3，因为循环完毕后i值变成了4。为了保存i的值，同样我们用闭包实现：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script type="text/javascript"></script></head><body> <ul> <li id="a1">aa</li> <li id="a2">aa</li> <li id="a3">aa</li> </ul></body></html>

（ps：var a = (function(){})(); 与 var a =new function(){}效果是一样的，均表示自执行函数。）

应用3：

下面的code是缓存的应用，catchNameArr。在匿名函数的调用对象中保存catch的值，返回的对象由于被CachedBox变量引用导致匿名函数的调用对象不会被回收，从而保持了catch的值。可以通过CachedBox.getCatch("regionId");来操作，若找不到regionId则从后台取，catchNameArr 主要是为了防止缓存过大。

同理，也可以用这种思想实现自增长的ID。

应用4：

这个是无忧上月MM的例子（点击这里查看原帖），用闭包实现程序的暂停执行功能，还蛮创意的。

把这个作用延伸下，我想到了用他来实现window.confirm。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script type="text/javascript"> var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id; } var doConfirm = function(divId) { $(divId).style.display = ""; function closeDiv() { $(divId).style.display = "none"; } return function(isOk) { if (isOk) { alert("Do deleting..."); } closeDiv(); } } </script> <style type="text/css"> body { font-family: Arial; font-size: 13px; background-color: #FFFFFF; } #confirmDiv { width: 200px; height: 100px; border: dashed 1px black; position: absolute; left: 200px; top: 150px; } </style></head><body> <div> <input name="btn2" type="button" value="删除" onclick="doConfirm('confirmDiv');" /> <div id="confirmDiv" style="display: none;"> <div style='position: absolute; left: 50px; top: 15px;'> <p> 你确定要删除吗?</p> <input type="button" value="确定" onclick="doConfirm('confirmDiv')(true);" /> <input type="button" value="取消" onclick="doConfirm('confirmDiv')(false);" /> </div> </div> </div></body></html>

看了上面的这些应用，再回到前面的一句话：在动态执行环境中，数据实时地发生变化，为了保持这些非持久型变量的值，我们用闭包这种载体来存储这些动态数据。这就是闭包的作用。也就说遇到需要存储动态变化的数据或将被回收的数据时，我们可以通过外面再包裹一层函数形成闭包来解决。

当然，闭包会导致很多外部函数的调用对象不能释放，滥用闭包会使得内存泄露，所以在频繁生成闭包的情景下我们要估计下他带来的副作用。

毕了。希望能对大家有所帮助。

本文链接

分享下如何写JS数组sort的比较函数

2010-06-30T14:23:00Z

我们知道，数组的sort方法可以对数组元素进行排序，默认是按ASCII字母表顺序排序。如果要根据其他的顺序排序就需要为sort方法提供一个比较函数作为参数。这里讲的就是如何写这个比较函数。

譬如:

var a=[1,5,3,7];

a.sort(function(a, b) { return b-a});//从大到小排列

那如果复杂点的顺序应该如何写这个比较函数呢。

对于比较函数function f(a,b){...} ，若返回正数，则说明a和b需要交换，否则不交换。所以我们可以通通根据下面的格式去写比较函数：

function f(a, b) {
if (...) {
return 1;

}
return -1;
}

然后，我们要做的就是写出if里面的条件，这个条件就是返回a、b需要交换的条件。譬如：对var a=["a","A","B","b"];进行不分大小写并从大到小排序，仅当a.toString().toLowerCase() < b.toString().toLowerCase()时，交换a、b，所以用此填充if条件即可。比较函数就是：

function f(a, b) {
if (a.toString().toLowerCase() < b.toString().toLowerCase()) {
return 1;

            }
            return -1;
        }

再譬如：要使数组的元素按先奇数后偶数的顺序排列，则若需a、b交换，仅当满足a是偶数且b是奇数条件即可，再按从小到大排序，仅当满足a、b均是奇数或偶数且a>b时即可。如下：

本文链接

JS写for循环，为什么一定要加var

2010-06-24T23:20:00Z

我知道，有些人（譬如之前的我）写js的for循环时，都不习惯加上var，这当然是语法允许的。譬如下面。

for(i=0;i<10;i++){//就不写成: var i=0
　alert(i);
}

但是，这真的不是个好习惯，下面我就说说为什么写Js的for循环一定要加var，否则会时不时给你带来烦人难查的bug。

譬如现在我们要实现这样的功能：输出

10
20
30
40
50
60
70
80
90
100
通过下面code实现，WriteNumber从1到10循环，每次循环调用TenTimes方法返回10倍的索引值。　

1 <script type="text/javascript">
2 function WriteNumber() {
3 for (i = 1; i <= 10; i++) {
4 document.write(TenTimes(i) + "<br/>")
5 }
6 }
7 function TenTimes(v) {
8 var result = 0;
9 alert(i);
10 for (i = 1; i <= 10; i++) {
11 result += v;
12 }
13 return result;
14 }
15 WriteNumber();
16 //alert(i)
17 </script>

你会发现最终只输出了10。大家可以用下面的代码框运行测试。

关于在WriteNumber和TenTimes方法里加不加var，就是说是否声明索引变量i有4种情况：

第一种情况，WriteNumber和TenTimes各有1个for循环，2个循环里均没有用var声明i索引变量。

运行结果：会alert出1。结果只输出了10，不是我们所想要的。

分析：执行WriteNumber时，其作用域内并没有找到声明过的变量i，直接对i进行赋值，则隐式的将i声明为全局变量，（对于函数内部未声明过的变量，如果给它赋值，会隐式的将它声明为全局变量。）循环开始，i=1，调TenTimes方法，发现TenTimes方法也没有声明过变量i ，所以TenTimes里的i就是全局变量i，就和WriteNumber的i成了同一个。这时line9 alert出来的自然是1了。TenTimes循环了10次，使得全局的i变成了11，自然WriteNumber就不会执行第2次循环操作了。

验证：如果在WriteNumber();语句后加alert(i)，即取消line16的注释，会发现alert出12（12=10+2个i++），证明了i此时为windows对象。

第二种情况，WriteNumber声明了i变量，即line3: var i=1，TenTimes未声明i变量，即line10: i=1。

运行结果：line9 alert(i)处报i未定义错误，因为WriteNumber有声明过变量i，所以没有成为全局的i，TenTimes执行时又没有声明过i，所以报未定义。若注释掉line9，输出结果正确。因为当TenTimes里运行到i=1时，隐式将i声明是全局变量，不影响WriteNumber里的i。WriteNumber仍然会执行10次循环。

验证：如果在WriteNumber();语句后加alert(i)，即取消line16的注释，会发现alert出11（11=10+TenTimes里的i++），证明了此时有windows.i。

第三种情况，WriteNumber没有声明i变量，即line3: i=1，TenTimes声明了i变量，即line10: var i=1。

运行结果：弹出10个undefined。因为WriteNumber未声明i，隐式将i声明是全局变量，而TenTimes有声明过变量i（补充一句，对于变量的声明都是在预编译中进行的），所以line9 alert(i)里的i不是windows.i，而是TenTimes声明的变量i，此时当然是undefined了。同时，发现输出结果正确，因为TenTimes的i不会影响WriteNumber的全局i，WriteNumber仍然是执行了10次循环。

第四种情况：WriteNumber和TenTimes均用var声明了i。

运行结果：注释掉line9，不说了，好习惯，结果当然完美。

　虽然第二、三种情况输出结果是正确的，但是对i的使用很混乱，应该算是运气导致结果正确，因为刚好1个是window.i，一个是函数内部的私有变量i，使得没有冲突。

此文虽然讲的是写for循环为什么一定要加var，但其实讲的是变量的作用域(或者说变量的生命周期)。理解之后，下面的2段code运行结果你应该能准确说出答案吧。

Ps：说道coding的好习惯，想起了这个：if(a==3) 应该写成if(3==a) 。因为我们常会把==写成1个=，如果把变量写在右边时只写了1个=，就会报编译错误，这样就能及时发现错误。

本文链接

无题

2010-06-24T23:19:00Z

非技术类。Updating from time to time order by date desc .

何不更品一壶茶，
且看沧桑云淡然。
不见尽处烟袅袅，
徐徐心丝漫漫路。

--2010-04-16

春去梦尽，称称几斤。
夜深人静，悠悠至今。
我的梦境，何知远近。
谁的风景，谁的小径。

--2009-05-17

一夜秋风几层凉
多少落叶风雨中
满城桂花香如故
途经故里谁低语

--2008-10-25

本文链接

Js动画（二）梦幻西游之逍遥生游览北俱芦洲

2010-06-10T00:56:00Z

背景：梦幻西游；人物：逍遥生；场景：北俱芦洲。

游览行为：点击鼠标，人物行走。右键也能使人物转向。由于我只找到了人物四个方向的素材，所以如果刚好正对人物位置的水平或垂直方向，走起来会有些别扭，如果用八方图，code上只要再加正东南西北四个方向即可。一共使用了2张图片，一张是人物的四方图，一张是场景图，场景图用于设为body背景。

贴上一部分效果图，你可以在本文结尾下载整个demo。

先贴上Common类，主要就是通用的操作，如取元素位置，取鼠标位置，我的很多文章里都用到的。

贴上Walker类，

人物行走如何实现呢？3步。

在这3步之前，当然会用init方法初始化1个div做为容器，来存放这个人物图片，所谓的人物行走就是这个div在移动。（细节见code的注释）

1. 显示人物四方图的某一块小图。

本例的四方图是4*4=16个人物形态构成，就是要显示具体的1个人物形态。实现方法：setWalkStatus。由于外部容器div的尺寸只是1个人物形态的尺寸，通过设置人物图片的left和top值，就能显示图片中第row行第col列的人物。

2.让人物动起来。

实现方法：beginWalk。通过setInterval循环执行setWalkStatus方法就能实现同一行的四个动作连贯显示。人物就动起来了。

3.让动起来的人物移动。

鼠标点击后移动，要首先算出朝哪个方向移动，从而显示那个方向的人物图片，方法：getDirection。

移动的主要code在move方法里。如何move和Js动画（一）基础所说的move原理一样，但是又不能照搬，因为那里的move是自己设置总帧数从而控制时间，达到设置移动快慢的目的。而这里，人物的移动肯定永远是匀速的，行走的距离长自然执行的总次数多，时间也就越长。所以原先自定义的count数要算出来，移动总次数=人物行走的总距离（像素）/速度（每1次移动speed像素），其他照旧。然后添加一些人物移动的边界限制。

文档加载后初始化逍遥生及注册逍遥生行为事件。

其中，var 逍遥生 = new Walker("walker2.png", { w: 70, h: 92 }, { x: 100, y: 50 }); 第一个参数是人物图片，第二个参数是单个人物形态尺寸，70=图片宽度280/4，第三个参数是，人物的出生地。

毕了。

点击下载

本文链接

Js动画（一）基础

2010-06-09T00:17:00Z

在再谈js拖拽（二）仿iGoogle自定义首页模块拖拽的最后，我说了接下来要写Js动画，转瞬拖到了今天，呵呵。这篇主要讲动画的基础，就是几个最基本的特效，即：移动，渐变和尺寸变化。接下来写个梦幻西游版逍遥生角色行走的动画，然后再适时的写些动画有关的例子，争取把这个系列写好。

我们玩魔兽世界的时候可以通过ctrl+r来查看当前的帧数，当帧数很小时，会觉得很卡，帧数很高则很流畅。所谓帧数就是1秒内显示图片的数量。当这么多帧图片连起来显示，就形成了动画。

Js中实现动画都是靠setInterval或者setTimeout来实现。setInterval自身就能不断循环来执行计算从而显示新的帧，setTimeout是间隔一段时间后仅执行一次，他需要配合函数循环实现，很多人偏爱setTimeout来实现。本文采用setInterval实现。

据说，普通人眼能看到1/24秒，就是说1秒至少24帧，每次移位间隔需要小于1000/24=41.7毫秒，也就说setInterval要每隔至少40毫秒执行一次，一般地，我们采用10毫秒，当然间隔时间越短，客户端执行计算次数就越多，如果你code计算量大则可以适当调长些。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script type="text/javascript"> /* t:currentCount 当前执行第t次 b:initPos 初始值 c:targetPos - initPos 发生偏移的距离值 d:count 一共执行d次效果：http://www.robertpenner.com/easing/easing_demo.html JavaScript Tween算法及缓动效果 http://www.cnblogs.com/cloudgamer/archive/2009/01/06/tween.html */ var Tween = { Linear: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; return c * t / d + b; }, Quad: { easeIn: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; return c * (t /= d) * t + b; }, easeOut: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; return -c * (t /= d) * (t - 2) + b; }, easeInOut: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; if ((t /= d / 2) < 1) return c / 2 * t * t + b; return -c / 2 * ((--t) * (t - 2) - 1) + b; } }, Cubic: { easeIn: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; return c * (t /= d) * t * t + b; }, easeOut: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; return c * ((t = t / d - 1) * t * t + 1) + b; }, easeInOut: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; if ((t /= d / 2) < 1) return c / 2 * t * t * t + b; return c / 2 * ((t -= 2) * t * t + 2) + b; } }, Quart: { easeIn: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; return c * (t /= d) * t * t * t + b; }, easeOut: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; return -c * ((t = t / d - 1) * t * t * t - 1) + b; }, easeInOut: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b; return -c / 2 * ((t -= 2) * t * t * t - 2) + b; } }, Quint: { easeIn: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; return c * (t /= d) * t * t * t * t + b; }, easeOut: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; return c * ((t = t / d - 1) * t * t * t * t + 1) + b; }, easeInOut: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b; return c / 2 * ((t -= 2) * t * t * t * t + 2) + b; } }, Sine: { easeIn: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; return -c * Math.cos(t / d * (Math.PI / 2)) + c + b; }, easeOut: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; return c * Math.sin(t / d * (Math.PI / 2)) + b; }, easeInOut: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b; } }, Expo: { easeIn: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b; }, easeOut: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b; }, easeInOut: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; if (t == 0) return b; if (t == d) return b + c; if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b; return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b; } }, Circ: { easeIn: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b; }, easeOut: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; return c * Math.sqrt(1 - (t = t / d - 1) * t) + b; }, easeInOut: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b; return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b; } }, Elastic: { easeIn: function(initPos, targetPos, currentCount, count, a, p) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3; if (!a || a < Math.abs(c)) { a = c; var s = p / 4; } else var s = p / (2 * Math.PI) * Math.asin(c / a); return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b; }, easeOut: function(initPos, targetPos, currentCount, count, a, p) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3; if (!a || a < Math.abs(c)) { a = c; var s = p / 4; } else var s = p / (2 * Math.PI) * Math.asin(c / a); return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b); }, easeInOut: function(initPos, targetPos, currentCount, count, a, p) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; if (t == 0) return b; if ((t /= d / 2) == 2) return b + c; if (!p) p = d * (.3 * 1.5); if (!a || a < Math.abs(c)) { a = c; var s = p / 4; } else var s = p / (2 * Math.PI) * Math.asin(c / a); if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b; return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b; } }, Back: { easeIn: function(initPos, targetPos, currentCount, count, s) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; if (s == undefined) s = 1.70158; return c * (t /= d) * t * ((s + 1) * t - s) + b; }, easeOut: function(initPos, targetPos, currentCount, count, s) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; if (s == undefined) s = 1.70158; return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; }, easeInOut: function(initPos, targetPos, currentCount, count, s) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; if (s == undefined) s = 1.70158; if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b; return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b; } }, Bounce: { easeIn: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; return c - Tween.Bounce.easeOut(d - t, 0, c, d) + b; }, easeOut: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; if ((t /= d) < (1 / 2.75)) { return c * (7.5625 * t * t) + b; } else if (t < (2 / 2.75)) { return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b; } else if (t < (2.5 / 2.75)) { return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b; } else { return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b; } }, easeInOut: function(initPos, targetPos, currentCount, count) { var b = initPos, c = targetPos - initPos, t = currentCount, d = count; if (t < d / 2) return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b; else return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b; } } } ///------------------------------------------------------------------------------------------------------ Animation = { timer: 10, SetOpacity: function(obj, n) { if (document.all) { obj.filters.alpha.opacity = n; } else { obj.style.opacity = n / 100; } }, fade: function(obj, target, count, Func) { obj = this.getItself(obj); var currentCount = 0; count = Math.abs(count) || 1; target = target < 0 ? 0 : (target > 100) ? 100 : target; var init = document.all ? obj.filters.alpha.opacity : window.getComputedStyle(obj, null).opacity * 100; Func = Func || Tween.Linear; var opr = this; var flag = setInterval(function() { if (currentCount > count) { clearInterval(flag); } else { currentCount++; var tmp = Func(init, target, currentCount, count); opr.SetOpacity(obj, tmp); //清除小数点的误差 if (Math.abs(tmp - target) < 1) { opr.SetOpacity(obj, target); } } } , this.timer); }, resize: function(obj, targetPos, count, Func) { obj = this.getItself(obj); var currentCount = 0; count = Math.abs(count) || 1; var initPos = { x: obj.offsetWidth, y: obj.offsetHeight } Func = Func || Tween.Linear; targetPos = { x: targetPos.x < 0 ? 0 : targetPos.x, y: targetPos.y < 0 ? 0 : targetPos.y } var flag = setInterval(function() { if (currentCount > count) { clearInterval(flag); } else { currentCount++; var tmpX = Func(initPos.x, targetPos.x, currentCount, count); var tmpY = Func(initPos.y, targetPos.y, currentCount, count); //width值不能小于0，但是算法返回值有可能出现负值 try { obj.style.width = tmpX + "px"; obj.style.height = tmpY + "px"; } catch (e) { } //清除小数点的误差 if (Math.abs(tmpX - targetPos.x) < 1) { obj.style.width = targetPos.x + "px"; } if (Math.abs(tmpY - targetPos.y) < 1) { obj.style.height = targetPos.y + "px"; } } } , this.timer); }, move: function(obj, targetPos, count, Func) { obj = this.getItself(obj); var currentCount = 0; count = Math.abs(count) || 1; var elPos = this.getElementPos(obj); var initPos = { x: elPos.x, y: elPos.y } Func = Func || Tween.Linear; var flag = setInterval(function() { if (currentCount > count) { clearInterval(flag); } else { currentCount++; var tmpX = Func(initPos.x, targetPos.x, currentCount, count); var tmpY = Func(initPos.y, targetPos.y, currentCount, count); obj.style.left = tmpX + "px"; obj.style.top = tmpY + "px"; //清除小数点的误差 if (Math.abs(tmpX - targetPos.x) < 1) { obj.style.left = targetPos.x + "px"; } if (Math.abs(tmpY - targetPos.y) < 1) { obj.style.top = targetPos.y + "px"; } } } , this.timer); }, getElementPos: function(el) { el = this.getItself(el); var _x = 0, _y = 0; do { _x += el.offsetLeft; _y += el.offsetTop; } while (el = el.offsetParent); return { x: _x, y: _y }; }, getItself: function(id) { return "string" == typeof id ? document.getElementById(id) : id; } } </script> <style type="text/css"> .div { position: absolute; border: solid 1px #849BCA; left: 50px; top: 100px; width: 160px; height: 130px; background-color: #DBE4ED; white-space: nowrap; overflow: hidden; opacity: 1; filter: alpha(opacity=100); } </style></head><body> <input type="button" value="Move" onclick="Animation.move('divObj',{x:500,y:500},100,Tween.Quart.easeInOut);" /> <input type="button" value="Resize" onclick="Animation.resize('divObj',{x:50,y:50},100,Tween.Cubic.easeIn);" /> <input type="button" value="SetOpacity" onclick="Animation.fade('divObj',50,100);" /> <input type="button" value="Move&Resize" onclick="Animation.resize('divObj',{x:300,y:200},100);Animation.move('divObj',{x:300,y:300},100);" /> <input type="button" value="Move&Resize&SetOpacity" onclick="Animation.fade('divObj',50,100);Animation.resize('divObj',{x:300,y:200},100);Animation.move('divObj',{x:100,y:100},100);" /> <input type="button" value="Reset" onclick="javascript:window.location.reload();" /> <div id="divObj" class="div" style=""> <div style="border: solid 1px green; width: 70px;"> ~_~ ----></div> <input type="text" value="input" style="width: 50px;" /><br /> <input type="button" value="button" /><br /> <img src="http://images.cnblogs.com/logo_small.gif" alt="" /> </div></body></html>

首先贴上封装好的动画类Animation。

Animation = {
timer: 10,
SetOpacity: function(obj, n) {
if (document.all) {
obj.filters.alpha.opacity = n;
}
else {
obj.style.opacity = n / 100;
}
},
fade: function(obj, target, count, Func) {
obj = this.getItself(obj);
var currentCount = 0;
count = Math.abs(count) || 1;
target = target < 0 ? 0 : (target > 100) ? 100 : target;
var init = document.all ? obj.filters.alpha.opacity : window.getComputedStyle(obj, null).opacity * 100;
Func = Func || Tween.Linear;
var opr = this;
var flag = setInterval(function() {
if (currentCount > count) {
clearInterval(flag);
}
else {
currentCount++;
var tmp = Func(init, target, currentCount, count);
opr.SetOpacity(obj, tmp);
//清除小数点的误差
if (Math.abs(tmp - target) < 1) {
opr.SetOpacity(obj, target);
}
}
}
, this.timer);
},
resize: function(obj, targetPos, count, Func) {
obj = this.getItself(obj);
var currentCount = 0;
count = Math.abs(count) || 1;
var initPos = { x: obj.offsetWidth, y: obj.offsetHeight }
Func = Func || Tween.Linear;
targetPos = { x: targetPos.x < 0 ? 0 : targetPos.x, y: targetPos.y < 0 ? 0 : targetPos.y }
var flag = setInterval(function() {
if (currentCount > count) {
clearInterval(flag);
}
else {
currentCount++;
var tmpX = Func(initPos.x, targetPos.x, currentCount, count);
var tmpY = Func(initPos.y, targetPos.y, currentCount, count);
//width值不能小于0，但是算法返回值有可能出现负值
try {
obj.style.width = tmpX + "px";
obj.style.height = tmpY + "px";
}
catch (e) {
}
//清除小数点的误差
if (Math.abs(tmpX - targetPos.x) < 1) {
obj.style.width = targetPos.x + "px";
}
if (Math.abs(tmpY - targetPos.y) < 1) {
obj.style.height = targetPos.y + "px";
}
}
}
, this.timer);
},
move: function(obj, targetPos, count, Func) {
obj = this.getItself(obj);
var currentCount = 0;
count = Math.abs(count) || 1;
var elPos = this.getElementPos(obj);
var initPos = { x: elPos.x, y: elPos.y }
Func = Func || Tween.Linear;
var flag = setInterval(function() {
if (currentCount > count) {
clearInterval(flag);
}
else {
currentCount++;
var tmpX = Func(initPos.x, targetPos.x, currentCount, count);
var tmpY = Func(initPos.y, targetPos.y, currentCount, count);
obj.style.left = tmpX + "px";
obj.style.top = tmpY + "px";
//清除小数点的误差
if (Math.abs(tmpX - targetPos.x) < 1) {
obj.style.left = targetPos.x + "px";
}
if (Math.abs(tmpY - targetPos.y) < 1) {
obj.style.top = targetPos.y + "px";
}
}
}
, this.timer);
},
getElementPos: function(el) {
el = this.getItself(el);
var _x = 0, _y = 0;
do {
_x += el.offsetLeft;
_y += el.offsetTop;
} while (el = el.offsetParent);
return { x: _x, y: _y };
},
getItself: function(id) {
return "string" == typeof id ? document.getElementById(id) : id;
}
}

其中fade方法是实现渐变效果的，resize方法是改变对象尺寸大小的，move方法是实现移动效果的。首先看下move方法，其他2个方法实现其实是类似的。

move方法的调用：Animation.move('divObj',{x:500,y:500},100,Tween.Quart.easeInOut); 第一个参数是移动的对象，第二个参数是移动的目标坐标，第三个参数是一共执行多少次移位，即移动时间内一共的帧数，即执行多少次，第4个参数是可选参数，指定Tween具体算法，若不加，则默认采用Tween.Linear。

移动问题的关键就是每次移位后，应该将移动对象定位到什么位置，即其left和top是多少。来看一个简单的数学题，当我们知道了一个点的起始位置initPos和终点位置targetPos，要求在count次移动后达到终点，该点为匀速运动，求第currentCount次移动后该点位置在哪里？显然的位置在：（targetPos - initPos）*（currentCount/count）+initPos。这个就是Tween.Linear算法。当这个点不是匀速运动时，就是Tween的其他算法。Tween来自Flash的AS，你可以参考http://www.robertpenner.com/easing/easing_demo.html去查看Tween各种算法的运动效果，也可以参考cloudgamer的一篇文章JavaScript Tween算法及缓动效果。相比下，我将Tween各种算法的传入参数稍改了下，将移动的总距离的运算放到了Tween算法内部，然后最后个参数是作为总共计算次数理解的，而不是持续时间。我本来是想用持续时间运算的，但是发现还是要将持续时间除以10毫秒得到总次数，然后参与运算，总次数还可能非整数，有误差，所以我干脆直接传总次数过来，当然你也可以改成持续时间。那在应用时，究竟移动次数应该写多少，在每次间隔10毫秒进行移动下，次数越多，耗时越长。譬如采用Tween.Linear计算移动位置时，大概是耗时count*10ms的1.5倍，譬如写100，就是100*10*1.5=1.5s左右，这个多出来的0.5倍是Tween.Linear计算花费的时间。贴上改写后的Tween。

/*
t:currentCount 当前执行第t次
b:initPos 初始值
c:targetPos - initPos 发生偏移的距离值
d:count 一共执行d次
效果：http://www.robertpenner.com/easing/easing_demo.html
JavaScript Tween算法及缓动效果 http://www.cnblogs.com/cloudgamer/archive/2009/01/06/tween.html
*/
var Tween = {
Linear: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * t / d + b;
},
Quad: {
easeIn: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * (t /= d) * t + b;
},
easeOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return -c * (t /= d) * (t - 2) + b;
},
easeInOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
return -c / 2 * ((--t) * (t - 2) - 1) + b;
}
},
Cubic: {
easeIn: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * (t /= d) * t * t + b;
},
easeOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * ((t = t / d - 1) * t * t + 1) + b;
},
easeInOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
return c / 2 * ((t -= 2) * t * t + 2) + b;
}
},
Quart: {
easeIn: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * (t /= d) * t * t * t + b;
},
easeOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
},
easeInOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
}
},
Quint: {
easeIn: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * (t /= d) * t * t * t * t + b;
},
easeOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
},
easeInOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
}
},
Sine: {
easeIn: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
},
easeOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * Math.sin(t / d * (Math.PI / 2)) + b;
},
easeInOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
}
},
Expo: {
easeIn: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
},
easeOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
},
easeInOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if (t == 0) return b;
if (t == d) return b + c;
if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
}
},
Circ: {
easeIn: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
},
easeOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
},
easeInOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
}
},
Elastic: {
easeIn: function(initPos, targetPos, currentCount, count, a, p) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3;
if (!a || a < Math.abs(c)) { a = c; var s = p / 4; }
else var s = p / (2 * Math.PI) * Math.asin(c / a);
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
},
easeOut: function(initPos, targetPos, currentCount, count, a, p) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3;
if (!a || a < Math.abs(c)) { a = c; var s = p / 4; }
else var s = p / (2 * Math.PI) * Math.asin(c / a);
return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
},
easeInOut: function(initPos, targetPos, currentCount, count, a, p) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if (t == 0) return b; if ((t /= d / 2) == 2) return b + c; if (!p) p = d * (.3 * 1.5);
if (!a || a < Math.abs(c)) { a = c; var s = p / 4; }
else var s = p / (2 * Math.PI) * Math.asin(c / a);
if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
}
},
Back: {
easeIn: function(initPos, targetPos, currentCount, count, s) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if (s == undefined) s = 1.70158;
return c * (t /= d) * t * ((s + 1) * t - s) + b;
},
easeOut: function(initPos, targetPos, currentCount, count, s) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if (s == undefined) s = 1.70158;
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
easeInOut: function(initPos, targetPos, currentCount, count, s) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if (s == undefined) s = 1.70158;
if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
}
},
Bounce: {
easeIn: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
return c - Tween.Bounce.easeOut(d - t, 0, c, d) + b;
},
easeOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b;
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
} else {
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
}
},
easeInOut: function(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount, d = count;
if (t < d / 2) return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
else return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
}
}
}

相比move方法，fade方法是用Tween算法去计算透明度，而resize方法是用Tween算法去计算width和height，没有大的区别。利用这3个特效，一些简单的动画都能实现了。如果某对象要在移动过程中同时改变大小和设置透明度，只要三个方法连续写下来即可。如：

（ps:若无特别声明，此博客所有例子均可在IE/FF/Chrome中运行）

点击下载

本文链接

博客园_JayChow

郁闷，郁闷

Js组件的一些写法（一）

腾讯的一个不固定高度消息的滚动特效

三栏宽度自适应布局及等高的思考

前端开发必须知道的JS（二） 闭包及应用

分享下如何写JS数组sort的比较函数

JS写for循环，为什么一定要加var

无题

Js动画（二）梦幻西游之逍遥生游览北俱芦洲

Js动画（一）基础

前端开发必须知道的JS（二）闭包及应用