mouseenter/mouseleave事件和delegate方法的实现

ONEBOYS — Sun, 18 Dec 2011 03:57:35 +0000

众所周知，事件onmouseover和onmouseout有一个极其不好的问题，就是在绑定元素内部的子元素上滑动会反复触发事件，及执行绑定的方法。

而ie在很早的时候有提供了另一对事件：mouseenter和mouseleaver。顾名思义，就是只有当mouse滑进滑出绑定元素的时候，才会触发。

但是，这本来只是ie的私有属性，虽然已属于DOM3 Event草案当中，其他浏览器的支持率并不是很高，目前看来，Opera11.10已提供支持，而Firefox到10.0会提供支持，Webkit的暂无消息。
所以，如果想要用，我们得自己动手。

先搞一个通用的事件绑定函数：

var addEvent = function( target,type,fn ) {
if(target.addEventListener)
{
target.addEventListener(type,fn,false);
}
else if(target.attachEvent)
{
target.attachEvent("on" + type,fn);
}
};
var removeEvent = function(target,type,fn ) {
if(target.addEventListener)
{
target.removeEventListener(type,fn,false);
}
else if(target.attachEvent)
{
target.detachEvent("on" + type,fn);
}
};

我们的mouseenter/leave是通过mouseover/out来实现的，只需屏蔽mouseover/out在元素内部触发时的事件传播即可。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>实现mouseenter、mouseleave事件</title>
<style>
.outer{padding:50px;background:#aaa;}
.inner{height:100px;background:#eee;}
</style>
</head>
<body>
<div id="outer" class="outer">
	只有移进移出外框的时候才执行方法。对内框操作不执行。click点击解除绑定。
	<div id="inner" class="inner"></div>
</div>
</body>
<script>
var $id=function(o){return document.getElementById(o) || o;}
var events = {}
events._mouseFn ={}; //保存“onmouseenter”和“onmouseleave”所绑定的方法
events._mouseHandle = function(fn){
	/* 转换方法，符合条件时才会执行 */
	var func = function(event){
		var target = event.target;
		var parent = event.relatedTarget; //在onmouseover/out操作中，相关的另一个节点
		while( parent && parent != this ){
			try{ parent = parent.parentNode; }
			catch(e){break;}
		}
		/* 只有当相关节点的父级不会是绑定的节点时（即二者不是父子的包含关系），才调用fn，否则不做处理 */
		( parent != this ) && (fn.call(target,event));
	};
	return func;
}
events.addEvent = function( obj,type,fn ) {
	if(obj.addEventListener)
    {
		if(obj.onmouseenter !== undefined){
			//for opera11，firefox10。他们也支持“onmouseenter”和“onmouseleave”，可以直接绑定
			obj.addEventListener(type,fn,false);
			return ;
		}
		if(type=="mouseenter" || type=="mouseleave" ){
			var eType = (type=="mouseenter") ? "mouseover" : "mouseout";
			var fnNew = events._mouseHandle(fn);
			obj.addEventListener(eType,fnNew,false);
			 /* 将方法存入events._mouseFn，以便以后remove */
			if(!events._mouseFn[obj]) events._mouseFn[obj] = {};
			if(!events._mouseFn[obj][eType]) events._mouseFn[obj][eType] = {};
				events._mouseFn[obj][eType][fn] = fnNew;
		}else{
			obj.addEventListener(type,fn,false);
		}
    }else if(obj.attachEvent)
    {
		// for ie
        obj.attachEvent("on" + type,fn);
    }
};
events.removeEvent = function(obj,type,fn ) {
    if(obj.addEventListener)
    {
		if(obj.onmouseenter !== undefined){
			obj.removeEventListener(type,fn,false);
			return ;
		}
		if(type=="mouseenter" || type=="mouseleave" ){
			var eType = (type=="mouseenter") ? "mouseover" : "mouseout";
			if(!events._mouseFn[obj][eType][fn]) return;
			obj.removeEventListener(eType,events._mouseFn[obj][eType][fn],false);
			events._mouseFn[obj][eType][fn] = null;
		}else{
			obj.removeEventListener(type,fn,false);
		}
    }
    else if(obj.attachEvent)
    {
        obj.detachEvent("on" + type,fn);
    }
};
(function(){
	/* 这里是演示demo 绑定解除事件 */
	var outer = $id("outer"),
		inner = $id("inner");
	events.addEvent(outer,"mouseenter",add);
	events.addEvent(outer,"mouseleave",add);
	events.addEvent(outer,"click",remove);
	function add(){
		var e = arguments[0] || window.event;
		var target = e.srcElement || e.target;
		inner.innerHTML = target.id + ' ' + e.type;
	}
	function remove(){
		events.removeEvent(outer,"mouseenter",add);
		events.removeEvent(outer,"mouseleave",add)
		inner.innerHTML = "click";
	}
})()
</script>

为了解除绑定，我们设计了一个events._mouseFn来保存绑定的方法，在解除操作时读取对应的方法进行解绑。因为事件可以绑定多个方法，我们需要保存对应的方法，以便之后对应解除。
当然如果这里如果按面向对象的思路实现，就可以各自保存，而不需要保持在同一个events._mouseFn对象下。但每绑定一个事件，都需实例化一个对象，显得很多余，所以不采用面向对象的模式。

接下来是文章的第二部分，我们来实现下jquery中提供的delegate方法。
（delegate是live方法的扩展版。delegate是基于live的，live是基于bind的。在jquery1.7中又被封装进了on方法。1.7中的on方法是一个很辽阔的方法。其实封装的越厉害，效率就越差了，这也是为什么我们选择自己做简单封装的原因，而不是使用jquery已封装好的）。
这个方法可以将想要绑定在子级元素上的事件方法，委托绑定在其父级上，用事件传播机制来触发执行。
这么做的好处有：
1：如果子级有n个并列元素需要绑定，绑子级需要绑n次，而将其绑定在父级上则只需绑定一次，这是很高效的。
2：如果子级元素有动态增加的话，新增元素是没有绑定过任何事件方法的。而如果之前选择的是绑定其父级，就不会有这个问题。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>delegate委托绑定事件方法的实现</title>
<style>
.outer{padding:50px;background:#aaa;zoom:1;}
.inner{display:block;height:50px;margin:5px;background:#eee;border:1px solid #ccc;}
</style>
</head>
<body>
<div id="outer" class="outer">
	<div id="message">点击下面框体</div>
	<span class="inner">1:</span>
	<span class="inner">2:</span>
	<span class="inner">3:</span>
	<span class="inner">4:</span>
	<span class="inner">5:</span>
	<div id="unbind">点击解除绑定</div>
</div>
</body>
<script>
var $id=function(o){return document.getElementById(o) || o;}
var events = {}
events._deleFn = {};
events._delegateHandle = function(obj,elm,fn){
	var func = function(event){
		var event = event || window.event;
		var target = event.srcElement || event.target;
		var parent = target;
		function contain(item,list){
			/* item对象是否就是list对象 */
			if(list.length == undefined ) return (item === list);
			/* item对象是否是list对象数组中的一个 */
			for(var i=0 ; i<list.length; i++){
				if(item === list[i]) return true;
			}
			return false;
		}
		while(parent){
			/* 如果触发的元素，属于绑定元素(elm)的子级。才执行方法 */
			if(contain(parent,elm)){
				fn.call(obj,event);
				return;
			}
			parent = parent.parentNode;
		}
	};
	return func;
};
events.delegate = function(obj,elm,type,fn){
	/* 将绑定的方法存入events._deleFn，以便之后解绑操作 */
	var fnNew = events._delegateHandle(obj,elm,fn);
	if(!events._deleFn[elm]) events._deleFn[elm] = {};
	if(!events._deleFn[elm][type]) events._deleFn[elm][type] = {};
	events._deleFn[elm][type][fn] = fnNew;
	if(obj.addEventListener)
    {
		obj.addEventListener(type,fnNew,false);
    }else if(obj.attachEvent)
    {
        obj.attachEvent("on" + type,fnNew);
    }
};
events.undelegate = function(obj,elm,type,fn){
	var fnNew = events._deleFn[elm][type][fn];
	if(!fnNew) return;
	if(obj.removeEventListener)
    {
		obj.removeEventListener(type,fnNew,false);
    }else if(obj.detachEvent)
    {
        obj.detachEvent("on" + type,fnNew);
    }
	events._deleFn[elm][type][fn] = null;
};
(function(){
	/* 这里是演示demo*/
	var outer = $id("outer"),
		inner = outer.getElementsByTagName("span"),
		msg = $id("message"),
		unbind = $id("unbind");
	var add = function(){
		var e = arguments[0] || window.event;
		var target = e.srcElement || e.target;
		msg.innerHTML =  target.innerHTML + ' ' + e.type;
	}
	function color(){
		msg.style.color = "#c00"
	}
	function remove(){
		events.undelegate(outer,inner,"click",color);
		events.undelegate(outer,unbind,"click",remove);
		msg.style.color = "#000"
		msg.innerHTML = "已解除绑定color方法.add方法仍在";
	}
	events.delegate(outer,inner,"click",add);
	events.delegate(outer,inner,"click",color);
	events.delegate(outer,unbind,"click",remove);
})()
</script>

这里的实现思路是这样的：如果触发事件的元素，是你想要绑定的元素的子级（当然他肯定已是委托实际绑定元素的子级），就执行绑定的事件方法，否则方法就不执行，看上去就像方法没绑定过一样。
同实现onmouseenter一样，我们也设计了一个events._deleFn来用于后面的解绑方法undelegate的实现。

在使用delegate时，我们同样遇到了mouseover/out的问题。
我们的解决方案是：不罗嗦，直接将mouseover/out处理成mouseenter/leave

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>delegate委托绑定事件方法的实现</title>
<style>
.outer{padding:50px;background:#aaa;zoom:1;}
.inner{display:block;height:50px;background:#eee;border:1px solid #ccc;}
</style>
</head>
<body>
<div id="outer" class="outer">
	<div id="message">划过下面框体</div>
	<span class="inner">1:</span>
	<span class="inner">2:</span>
	<span class="inner">3:</span>
	<span class="inner">4:</span>
	<span class="inner">5:</span>
	<div id="unbind">点击解除绑定</div>
</div>
</body>
<script>
var $id=function(o){return document.getElementById(o) || o;}
var events = {}
events._deleFn = {};
events._delegateHandle = function(obj,elm,fn){
	var func = function(event){
		var event = event || window.event;
		var target = event.srcElement || event.target;
		var parent = target;
		function contain(item,list){
			/* item对象是否就是list对象 */
			if(list.length == undefined ) return (item === list);
			/* item对象是否是list对象数组中的一个 */
			for(var i=0 ; i<list.length; i++){
				if(item === list[i]) return true;
			}
			return false;
		}
		while(parent){
			/* 如果触发的元素，属于绑定元素(elm)的子级。 */
			if(contain(parent,elm)){
				if(event.type == 'mouseover' || event.type == 'mouseout'){
					/*
					* 将mouseover/out直接处理成mouseenter/leave: 事件相关元素不属于绑定元素的子级，才绑定方法
					*/
					//事件相关元素。ie下使用toElement和fromElement，其他用relatedTarget。
					var related = event.relatedTarget || ((event.type == 'mouseout') ? event.toElement : event.fromElement);
					if(contain(target,elm) && contain(related,elm)) {
						/* 如果，触发元素和相关元素都属于绑定元素(elm)。执行方法 */
						fn.call(obj,event);
						return;
					}
					while( related && !contain(related,elm)){
						  related = related.parentNode;
					}
					/* 事件相关元素，不属于绑定元素(elm)的子级，执行方法  */
					!contain(related,elm) && (fn.call(obj,event));
				}else{
					fn.call(obj,event);
				}
				return;
			}
			parent = parent.parentNode;
		}
	};
	return func;
};
events.delegate = function(obj,elm,type,fn){
	/* 将绑定的方法存入events._deleFn，以便之后解绑操作 */
	var fnNew = events._delegateHandle(obj,elm,fn);
	if(!events._deleFn[elm]) events._deleFn[elm] = {};
	if(!events._deleFn[elm][type]) events._deleFn[elm][type] = {};
	events._deleFn[elm][type][fn] = fnNew;
	if(obj.addEventListener)
    {
		obj.addEventListener(type,fnNew,false);
    }else if(obj.attachEvent)
    {
        obj.attachEvent("on" + type,fnNew);
    }
};
events.undelegate = function(obj,elm,type,fn){
	var fnNew = events._deleFn[elm][type][fn];
	if(!fnNew) return;
	if(obj.removeEventListener)
    {
		obj.removeEventListener(type,fnNew,false);
    }else if(obj.detachEvent)
    {
        obj.detachEvent("on" + type,fnNew);
    }
events._deleFn[elm][type][fn] = null;
};
(function(){
	/* 这里是演示demo*/
	var outer = $id("outer"),
		inner = outer.getElementsByTagName("span"),
		msg = $id("message"),
		unbind = $id("unbind");
	events.delegate(outer,inner,"mouseover",add);
	events.delegate(outer,inner,"mouseout",add);
	events.delegate(outer,unbind,"click",remove);
	function add(){
		var e = arguments[0] || window.event;
		var target = e.srcElement || e.target;
		msg.innerHTML =  target.innerHTML + ' ' + e.type;
	}
	function remove(){
		events.undelegate(outer,inner,"mouseover",add);
		events.undelegate(outer,inner,"mouseout",add);
		events.undelegate(outer,unbind,"click",remove);
	}
})()
</script>

最后，整理一下，封装一个支持mouseenter 和 mouseleave事件，delegate方法及其他们的解除绑定的方法的功能函数库。

var events = {}
events._deleFn = {}; //保存delegate所绑定的方法
events._mouseFn ={}; //保存“onmouseenter”和“onmouseleave”所绑定的方法
events._mouseHandle = function(fn){
/* 实现mouseenter/leave 的转换方法，符合条件时才会执行 */
var func = function(event){
var target = event.target;
var parent = event.relatedTarget; //在onmouseover/out操作中，相关的另一个节点
while( parent && parent != this ){
try{ parent = parent.parentNode; }
catch(e){break;}
}
/* 只有当相关节点的父级不会是绑定的节点时（即二者不是父子的包含关系），才调用fn，否则不做处理 */
( parent != this ) && (fn.call(target,event));
};
return func;
}
events._delegateHandle = function(obj,elm,fn){
/* 实现delegate 的转换方法，符合条件时才会执行 */
var func = function(event){
var event = event || window.event;
var target = event.srcElement || event.target;
var parent = target;
function contain(item,list){
/* item对象是否就是list对象 */
if(list.length == undefined ) return (item === list);
/* item对象是否是list对象数组中的一个 */
for(var i=0 ; i<list.length; i++){
if(item === list[i]) return true;
}
return false;
}
while(parent){
/* 如果触发的元素，属于绑定元素(elm)的子级。 */
if(contain(parent,elm)){
if(event.type == 'mouseover' || event.type == 'mouseout'){
/*
* 将mouseover/out直接处理成mouseenter/leave: 事件相关元素不属于绑定元素的子级，才绑定方法
*/
//事件相关元素。ie下使用toElement和fromElement，其他用relatedTarget。
var related = event.relatedTarget || ((event.type == 'mouseout') ? event.toElement : event.fromElement);
if(contain(target,elm) && contain(related,elm)) {
/* 如果，触发元素和相关元素都属于绑定元素(elm)。执行方法 */
fn.call(obj,event);
return;
}
while( related && !contain(related,elm)){
related = related.parentNode;
}
/* 事件相关元素，不属于绑定元素(elm)的子级，执行方法 */
!contain(related,elm) && (fn.call(obj,event));
}else{
fn.call(obj,event);
}
return;
}
parent = parent.parentNode;
}
};
return func;
};
events.addEvent = function( obj,type,fn ) {
if(obj.addEventListener)
{
if(obj.onmouseenter !== undefined){
//for opera11，firefox10。他们也支持“onmouseenter”和“onmouseleave”，可以直接绑定
obj.addEventListener(type,fn,false);
return ;
}
if(type=="mouseenter" || type=="mouseleave" ){
var eType = (type=="mouseenter") ? "mouseover" : "mouseout";
var fnNew = events._mouseHandle(fn);
obj.addEventListener(eType,fnNew,false);
/* 将方法存入events._mouseFn，以便以后remove */
if(!events._mouseFn[obj]) events._mouseFn[obj] = {};
if(!events._mouseFn[obj][eType]) events._mouseFn[obj][eType] = {};
events._mouseFn[obj][eType][fn] = fnNew;
}else{
obj.addEventListener(type,fn,false);
}
}else if(obj.attachEvent)
{
// for ie
obj.attachEvent("on" + type,fn);
}
};
events.removeEvent = function(obj,type,fn ) {
if(obj.addEventListener)
{
if(obj.onmouseenter !== undefined){
obj.removeEventListener(type,fn,false);
return ;
}
if(type=="mouseenter" || type=="mouseleave" ){
var eType = (type=="mouseenter") ? "mouseover" : "mouseout";
if(!events._mouseFn[obj][eType][fn]) return;
obj.removeEventListener(eType,events._mouseFn[obj][eType][fn],false);
events._mouseFn[obj][eType][fn]={};
}else{
obj.removeEventListener(type,fn,false);
}
}
else if(obj.attachEvent)
{
obj.detachEvent("on" + type,fn);
}
};
events.delegate = function(obj,elm,type,fn){
var fnNew = events._delegateHandle(obj,elm,fn);
events.addEvent(obj,type,fnNew);
/* 将绑定的方法存入events._deleFn，以便之后解绑操作 */
if(!events._deleFn[elm]) events._deleFn[elm] = {};
if(!events._deleFn[elm][type]) events._deleFn[elm][type] = {};
events._deleFn[elm][type][fn] = fnNew;
};
events.undelegate = function(obj,elm,type,fn){
var fnNew = events._deleFn[elm][type][fn];
if(!fnNew) return;
events.removeEvent(obj,type,fnNew);
events._deleFn[elm][type][fn] = null;
};

No related posts. From:

瀑布流布局及扩展——格子块的智能堆砌

ONEBOYS — Wed, 12 Oct 2011 14:32:45 +0000

图片分享网站 Pinterest（beta），在不久前获得了2700$的投资，估值已超2亿元（据说现该公司团队有8人）。该网站的一大特色就是每一张分享的图片被拟作“Pin”被钉在页面上面，每一Pin依尺寸智能排列，同时滚动页面时异步加载新Pin，极具效果。这种创新模式被在国内也被广泛copy，其中最有前途的当属Mark之，以”Mark”代”Pin”,也算有些想法。

以下是利用豆瓣API数据做的效果：完整效果
部分代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>等宽格子堆砌</title>
<style>
*{padding:0;margin:0;}
#wrap{position:relative;zoom:1;margin:0px auto;}
#wrap li{width:250px;float:left;list-style:none;}
.boxCont{position:relative;margin:15px;border:1px solid #ccc;background:#eee;
	background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
	background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
	background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
	background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
	-webkit-border-radius: 60px / 5px;
	-moz-border-radius: 60px / 5px;
	border-radius:60px / 5px;
	-webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
	-moz-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
	box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
}
.boxCont:before{
	content: '';
	width: 50px;
	height: 50px;
	top:0; right:0;
	position:absolute;
	display: inline-block;
	z-index:-1;
	-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
	-moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
	-o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
	transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
}
.boxCont:after{
	content: '';
	width: 100px;
	height: 100px;
	top:0; left:0;
	position:absolute;
	z-index:-1;
	display: inline-block;
	-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
	-webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);
	-moz-transform: rotate(2deg) translate(20px,25px) skew(20deg);
	-o-transform: rotate(2deg) translate(20px,25px) skew(20deg);
	transform: rotate(2deg) translate(20px,25px) skew(20deg);
}
</style>
</head>
<body>
<ul id="wrap"></ul>
</body>
<script type="text/javascript">
var $id = function(o){ return document.getElementById(o) || o};
function sort(el){
	var h = [];
	var box = el.getElementsByTagName("li");
	var minH = box[0].offsetHeight,
		boxW = box[0].offsetWidth,
		boxH,
		n = document.documentElement.offsetWidth / boxW | 0;  //计算页面能排下多少Pin
	el.style.width = n * boxW + "px";
	for(var i = 0; i < box.length; i++) {
		boxh = box[i].offsetHeight; //获取每个Pin的高度
		if(i < n) { //第一行Pin以浮动排列，不需绝对定位
			h[i] = boxh;
			box[i].style.position = '';
		} else {
			minH =  Math.min.apply({},h); //取得各列累计高度最低的一列
			minKey = getarraykey(h, minH);
			h[minKey] += boxh ; //加上新高度后更新高度值
			box[i].style.position = 'absolute';
			box[i].style.top = minH + 'px';
			box[i].style.left = (minKey * boxW) + 'px';
		}
	}
};
/* 返回数组中某一值的对应项数 */
function getarraykey(s, v) {
	for(k in s) {
		if(s[k] == v) {
			return k;
		}
	}
};
/* 随机创建Pin */
var pin = '';
for(i = 0; i < 30; i++) {
	height = Math.floor(Math.random()*200 + 200);
	pin += '<li><div class="boxCont" style="height:' + height + 'px;"></div></li>';
};
$id("wrap").innerHTML = pin;
window.onload = window.onresize = function() {
	sort($id("wrap"));
};
</script>
</html>

这种布局中虽然每个Pin的高度不尽相同，但是他们的宽度都是一样的。
那么假如，很邪恶的提出一个要求，宽度也不尽相同，只是说宽高都按比例成倍增加，那还怎么排列呢？
呵呵，如下：

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>宽高尺寸不同的格子堆砌</title>
<style>
body{background:#F6F7F8;}
.myWidget{position:relative;overflow:hidden;zoom:1;margin:0 auto;}
.MBox{float:left;}
.widgetBox{position:relative;overflow:hidden;zoom:1;width:186px;height:166px;margin:6px;border:1px solid #E1E1E3;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	box-shadow:2px 3px 5px #d3d3d3;
	-moz-box-shadow:2px 3px 5px #d3d3d3;
	-webkit-box-shadow:2px 3px 5px #d3d3d3;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#fefefe, endColorstr=#e0e0e2);
	background: linear-gradient(top, #fefefe, #f6f6f6 ,#f3f3f3,#f2f2f2,#e0e0e2);
	background: -moz-linear-gradient(top, #fefefe, #f6f6f6 ,#f3f3f3,#f2f2f2,#e0e0e2);
	background: -webkit-gradient(linear, 0 0, 0 100% , from(#fefefe),to(#e0e0e2));
	background: -webkit-linear-gradient(0 0, #fefefe, #f6f6f6 ,#f3f3f3,#f2f2f2,#e0e0e2);
}
</style>
<script>
var $id = function(o){ return document.getElementById(o) || o ;};
var getElementsByClassName = function(className,parent,tag) {
	parent = parent || document;
    if(parent.getElementsByClassName){
        return  parent.getElementsByClassName(className)
    }else{
        tag = tag || '*';
        var returnElements = []
        var els =  parent.getElementsByTagName(tag);
        className = className.replace(/\-/g, "\\-");
        var pattern = new RegExp("(^|\\s)"+className+"(\\s|$)");
		var i = 0;
        while(i < els.length){
            if (pattern.test(els[i].className) ) {
                returnElements.push(els[i]);
            }
			i++;
        }
        return returnElements;
    }
};
/* 格子排序 */
var box={};
box.gen={w:200,h:180};
box.init=function(el){
	box.size=[]; //格子,[1,2]表示1X2的大格子
	box.obj={};
	box.oArray=[];
	box.maxY=-1;
	box.mbox = getElementsByClassName("MBox",el,'div');
	box.row = document.documentElement.offsetWidth / box.gen.w >> 0;  //每行标准格数
	el.style.width = box.row * box.gen.w + "px";
	var i = 0 , nx, ny;
	while( i < this.mbox.length){
		if( getElementsByClassName("bigBox",this.mbox[i],'div').length > 0 ){
			nx=Math.ceil(this.mbox[i].offsetWidth / this.gen.w);
			nx=(nx > this.row) ? this.row : nx; //大小超出限制
			ny=Math.ceil(this.mbox[i].offsetHeight / this.gen.h);
			this.size.push([nx,ny]);
		}else{
			this.size.push(1);
		}
		i++;
	}
	box.sort(el);
};
box.setIfr=function(el){  //大格子初始化
 	var ifr = getElementsByClassName("bigBox",el,'div');;
   	if(ifr.length==0) return false;
	var i = 0, nx, ny, theifr;
	while(i < ifr.length){
		theifr =  getElementsByClassName("innerBox",ifr[i],'div');
		nx=Math.ceil(theifr[0].offsetWidth / this.gen.w); //bigBox横向占的块数
		ny=Math.ceil(theifr[0].offsetHeight / this.gen.h);
		ifr[i].style.width = nx*this.gen.w-14 + 'px' ;
		ifr[i].style.height = ny*this.gen.h-14 + 'px' ;
		i++;
	}
};
box.sort=function(el){
	var y=0, x=0, temp={x:Infinity, y:Infinity}, flag=Infinity, name;
	for(var n=0; n < this.size.length ; n++){
		if(flag == 0){
			x=temp.x;
			y=temp.y;
		}
		flag=flag-1;
		if(x>box.row-1){ //换行
			x=0;
			y++;
		}
		name=x+'_'+y;  //对象属性名（反映占领的格子）
		if(this.hasN(name)) {  //判断属性名是否存在
			n--;
			x++;
			if(flag<Infinity) flag=flag+1;
			continue;
		}
		if(!this.size[n].length){  //普通格子
			this.obj[name]=[x,y];  //项值（反映坐标值）
			x++;
		}
		else{  //大格子
			if(this.over(x,y,n)) {
				if(temp.y > y){
					temp.y = y;
					temp.x = x;
				}
				if(temp.y < Infinity){
					flag=1;
				}
				n--;
				x++;
				continue;
			}
			this.obj[name]=[x,y];
			this.apply(x,y,n);
			x+=this.size[n][0];
		}
		if(flag==-1) {
			flag = 	Infinity;
			temp.y = Infinity;
			temp.x = Infinity;
		}
		var h=this.size[n][1]-1 || 0;
		box.maxY=(box.maxY > y+h)? box.maxY : y+h;
	}
	for(var i in this.obj){
		if(this.obj[i]===0 || !this.obj.hasOwnProperty(i)) continue;
		this.oArray.push(this.obj[i]);
	}
	box.put(el);
};
box.hasN=function(n){
	return n in this.obj;
};
box.over=function(x,y,n){  //判断是否会重叠
	var name;
	if(x+this.size[n][0] > this.row) return true; //超出显示范围
	for(var k=1; k<this.size[n][1];k++){
		name=x+'_'+(y-0+k);
		if(this.hasN(name)) {return true;}  //左侧一列有无重叠
	}
	for(k=1; k<this.size[n][0];k++){
		name=(x-0+k)+'_'+y;
		if(this.hasN(name)) {return true;}  //上侧一行有无重叠
	}
	return false;
};
box.apply=function(x,y,n){  //大格子中多占的位置
	var posX=x, //大格子左上角位置
		posY=y;
	for(var t=0; t<this.size[n][0]; t++) {
		for(var k=0; k<this.size[n][1]; k++){
			name=(posX+t)+'_'+(posY+k);
			if(t==0 && k==0) { continue; }
			this.obj[name]=0;   //多占的格子无坐标值
		}
	}
};
box.put=function(el){
	var x,y;
	for(var i =0;i< this.oArray.length; i++){
		x=box.gen.w*this.oArray[i][0];
		y=box.gen.h*this.oArray[i][1];
		box.mbox[i].style.cssText = "position:absolute;left:"+ x +"px;top:" + y + "px;";
	}
	el.style.height= box.gen.h*(box.maxY+1) +'px';
};
</script>
</head>
<body>
<div id="myWidget" class="myWidget"></div>
<script>
var myWidget = $id("myWidget");
//创建随机内容
var content = '';
for(i = 0; i < 30; i++) {
	if(!(Math.random()*3 >> 0)){
		height = Math.floor(Math.random()*200 + 100);
		width = Math.floor(Math.random()*200 + 100);
		content += '<div class="MBox"><div class="widgetBox bigBox"><div style="width:' + width +'px;height:' + height +'px;margin:0 auto;" class="innerBox"></div></div></div>';
	}else{
		content += '<div class="MBox"><div class="widgetBox"></div></div>';
	}
};
myWidget.innerHTML = content;
window.onload = function(){
	box.setIfr(myWidget);
	box.init(myWidget);
};
window.onresize = function(){
	box.init(myWidget);
};
</script>
</body>
</html>

现在这种布局已经不能叫瀑布流了，我们称之为格子块，格子块通过算法智能堆砌。

到最后，说点下睛也好，说添下足也好，我们再加一个拖动交换格子的效果。

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>宽高尺寸不同的格子堆砌(可拖动换位)</title>
<style>
body{background:#F6F7F8;}
.myWidget{position:relative;overflow:hidden;zoom:1;margin:0 auto;}
.MBox{float:left;}
.widgetBox{position:relative;overflow:hidden;zoom:1;width:186px;height:166px;margin:6px;border:1px solid #E1E1E3;cursor:move;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	box-shadow:2px 3px 5px #d3d3d3;
	-moz-box-shadow:2px 3px 5px #d3d3d3;
	-webkit-box-shadow:2px 3px 5px #d3d3d3;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#fefefe, endColorstr=#e0e0e2);
	background: linear-gradient(top, #fefefe, #f6f6f6 ,#f3f3f3,#f2f2f2,#e0e0e2);
	background: -moz-linear-gradient(top, #fefefe, #f6f6f6 ,#f3f3f3,#f2f2f2,#e0e0e2);
	background: -webkit-gradient(linear, 0 0, 0 100% , from(#fefefe),to(#e0e0e2));
	background: -webkit-linear-gradient(0 0, #fefefe, #f6f6f6 ,#f3f3f3,#f2f2f2,#e0e0e2);
}
</style>
<script>
var $id = function(o){ return document.getElementById(o) || o ;};
var getElementsByClassName = function(className,parent,tag) {
	parent = parent || document;
    if(parent.getElementsByClassName){
        return  parent.getElementsByClassName(className)
    }else{
        tag = tag || '*';
        var returnElements = []
        var els =  parent.getElementsByTagName(tag);
        className = className.replace(/\-/g, "\\-");
        var pattern = new RegExp("(^|\\s)"+className+"(\\s|$)");
		var i = 0;
        while(i < els.length){
            if (pattern.test(els[i].className) ) {
                returnElements.push(els[i]);
            }
			i++;
        }
        return returnElements;
    }
};
var Util = new Object();
Util.getOffset = function (el, isLeft) {
    var retValue = 0;
   // while (el != null) {
        retValue += el["offset" + (isLeft ? "Left" : "Top")];
     //   el = el.offsetParent;
    //}
    return retValue;
};
Util.bindFunction = function (el, fucName) {
    return function () {
        return el[fucName].apply(el, arguments);
    };
};
Util.re_calcOff = function (el) {
    for (var i = 0; i < Util.dragArray.length; i++) {
        var ele = Util.dragArray[i];
        ele.elm.pagePosLeft = Util.getOffset(ele.elm, true);
        ele.elm.pagePosTop = Util.getOffset(ele.elm, false);
    }
    var nextSib = el.elm.nextSibling;
    while (nextSib) {
        nextSib.pagePosTop -= el.elm.offsetHeight;
        nextSib = nextSib.nextSibling;
    }
};
Util.hide = function () {
    Util.rootElement.style.display = "none";
};
Util.show = function () {
    Util.rootElement.style.display = "";
};
ghostElement = null;
found = null;
getGhostElement = function () {
    if (!ghostElement) {
        ghostElement = document.createElement("DIV");
        ghostElement.className = "MBox ghostBox";
    }
    return ghostElement;
};
function draggable(el) {
    this._dragStart = start_Drag;
    this._drag = when_Drag;
    this._dragEnd = end_Drag;
    this._afterDrag = after_Drag;
    this.isDragging = false;
    this.elm = el;
	this.hasIFrame = this.elm.getElementsByTagName("IFRAME").length > 0;
        Drag.init(el, this.elm);
        this.elm.onDragStart = Util.bindFunction(this, "_dragStart");
        this.elm.onDrag = Util.bindFunction(this, "_drag");
        this.elm.onDragEnd = Util.bindFunction(this, "_dragEnd");
};
function start_Drag() {
	Util.re_calcOff(this);
    this.origNextSibling = this.elm.nextSibling;
    var _ghostElement = getGhostElement();
    var offH = this.elm.offsetHeight;
    var offW = this.elm.offsetWidth;
    var offLeft = Util.getOffset(this.elm, true);
    var offTop = Util.getOffset(this.elm, false);
   // Util.hide();
   //this.elm.parentNode.getElementsByTagName('iframe')[0].style.visibility = 'hidden';
    this.elm.style.width = offW + "px";
    _ghostElement.style.height = offH + "px";
    _ghostElement.style.width = offW + "px";
    this.elm.parentNode.insertBefore(_ghostElement, this.elm.nextSibling);
    this.elm.style.position = "absolute";
    this.elm.style.zIndex = 100;
    this.elm.style.left = offLeft + "px";
    this.elm.style.top = offTop + "px";
    //Util.show();
    this.isDragging = false;
    return false;
};
function when_Drag(clientX, clientY) {
	    if (!this.isDragging) {
        this.elm.style.filter = "alpha(opacity=70)";
        this.elm.style.opacity = 0.7;
        this.isDragging = true;
    }
    found = null;
    var max_distance = 100000000;
    for (var i = 0; i < Util.dragArray.length; i++) {
        var ele = Util.dragArray[i];
        var distance = Math.sqrt(Math.pow(clientX - ele.elm.pagePosLeft, 2) + Math.pow(clientY -  ele.elm.offsetTop, 2));
        if (ele == this) {
            continue;
        }
        if (isNaN(distance)) {
            continue;
        }
        if (distance < max_distance) {
            max_distance = distance;
           	 found = ele;
        }
    };
    var _ghostElement = getGhostElement();
    if (found != null) {
    	if(this.elm.pagePosLeft < clientX){
    		found.elm.parentNode.insertBefore(_ghostElement, found.elm.nextSibling);
    	}else{
    		found.elm.parentNode.insertBefore(_ghostElement, found.elm);
    	}
    };
};
function end_Drag() {
	//this.elm.parentNode.getElementsByTagName('iframe')[0].style.visibility = 'visible';
	if (this._afterDrag()) {
	}
	return true;
};
function after_Drag() {
    var returnValue = false;
   // Util.hide();
    this.elm.style.position = "";
    this.elm.style.width = "";
    this.elm.style.zIndex = "";
    this.elm.style.filter = "";
    this.elm.style.opacity = "";
    var ele = getGhostElement();
    if (ele.nextSibling != this.origNextSibling) {
    	ele.parentNode.insertBefore(found.elm, this.elm);
    	ele.parentNode.insertBefore(this.elm, ele.nextSibling);
        returnValue = true;
    }
    ele.parentNode.removeChild(ele);
    //Util.show();
   box.init(Util.rootElement);
   return returnValue;
};
var Drag = {
		obj:null,
		init:function (elementHeader, element) {
		    	elementHeader.onmousedown = Drag.start;
    		    elementHeader.obj = element;
		    if (isNaN(parseInt(element.style.left))) {
				element.style.left = "0px";
			}
			if (isNaN(parseInt(element.style.top))) {
				element.style.top = "0px";
			}
			element.onDragStart = new Function();
			element.onDragEnd = new Function();
			element.onDrag = new Function();
		},
		start:function (event) {
	    var element = Drag.obj = this.obj;
		    event = Drag.fixE(event);
		    if (event.which != 1) {
	    		return true;
    		}
    		element.onDragStart();
		    element.lastMouseX = event.clientX;
			element.lastMouseY = event.clientY;
		    document.onmouseup = Drag.end;
			document.onmousemove = Drag.drag;
			return false;
		},
		drag:function (event) {
			event = Drag.fixE(event);
		    if (event.which == 0) {
	    		return Drag.end();
    		}
    		var element = Drag.obj;
		    var _clientX = event.clientY;
			var _clientY = event.clientX;
		    if (element.lastMouseX == _clientY && element.lastMouseY == _clientX) {
				return false;
			};
			if(_clientX + document.documentElement.scrollTop + document.body.scrollTop < 0 ||  _clientX > document.documentElement.offsetHeight){
				return false;
			};
			var sTo=0;
			if( _clientX < 0 ){
				sTo=_clientX;
			};
			if((_clientX - document.documentElement.clientHeight) > 0){
		    	sTo=_clientX - document.documentElement.clientHeight;
			};
			window.scrollBy(0,sTo);
		    var _lastX = parseInt(element.style.top);
			var _lastY = parseInt(element.style.left);
		    var newX, newY;
		    newX = _lastY + _clientY - element.lastMouseX;
			newY = _lastX + _clientX - element.lastMouseY;
		    element.style.left = newX  + "px";
			element.style.top = newY + sTo + "px";
		    element.lastMouseX = _clientY;
			element.lastMouseY = _clientX;
		    element.onDrag(newX, newY);
			return false;
		},
		end:function (event) {
			event = Drag.fixE(event);
		    document.onmousemove = null;
			document.onmouseup = null;
		    var _onDragEndFuc = Drag.obj.onDragEnd();
		    Drag.obj = null;
	    return _onDragEndFuc;
		},
		fixE:function (ig_) {
	    if (typeof ig_ == "undefined") {
	        ig_ = window.event;
	    }
	    if (typeof ig_.layerX == "undefined") {
	        ig_.layerX = ig_.offsetX;
	    }
	    if (typeof ig_.layerY == "undefined") {
	        ig_.layerY = ig_.offsetY;
	    }
	    if (typeof ig_.which == "undefined") {
	        ig_.which = ig_.button;
	    }
    	return ig_;
	}
};
var initDrag = function (el) {
	Util.rootElement = el;
    Util.elem = Util.rootElement.children;
    Util.dragArray = new Array();
    var counter = 0;
    for (var i = 0; i < Util.elem.length; i++) {
    	var elem = Util.elem[i];
		Util.dragArray[counter] = new draggable(elem);
		counter++;
    };
	box.setIfr(Util.rootElement);
	box.init(Util.rootElement);
};
/* 格子排序 */
var box={};
box.gen={w:200,h:180};
box.init=function(el){
	box.size=[]; //格子,[1,2]表示1X2的大格子
	box.obj={};
	box.oArray=[];
	box.maxY=-1;
	box.mbox = getElementsByClassName("MBox",el,'div');
	box.row = document.documentElement.offsetWidth / box.gen.w >> 0;  //每行标准格数
	el.style.width = box.row * box.gen.w + "px";
	var i = 0 , nx, ny;
	while( i < this.mbox.length){
		if( getElementsByClassName("bigBox",this.mbox[i],'div').length > 0 ){
			nx=Math.ceil(this.mbox[i].offsetWidth / this.gen.w);
			nx=(nx > this.row) ? this.row : nx; //大小超出限制
			ny=Math.ceil(this.mbox[i].offsetHeight / this.gen.h);
			this.size.push([nx,ny]);
		}else{
			this.size.push(1);
		}
		i++;
	}
	box.sort(el);
};
box.setIfr=function(el){  //大格子初始化
 	var ifr = getElementsByClassName("bigBox",el,'div');;
   	if(ifr.length==0) return false;
	var i = 0, nx, ny, theifr;
	while(i < ifr.length){
		theifr =  getElementsByClassName("innerBox",ifr[i],'div');
		nx=Math.ceil(theifr[0].offsetWidth / this.gen.w); //bigBox横向占的块数
		ny=Math.ceil(theifr[0].offsetHeight / this.gen.h);
		ifr[i].style.width = nx*this.gen.w-14 + 'px' ;
		ifr[i].style.height = ny*this.gen.h-14 + 'px' ;
		i++;
	}
};
box.sort=function(el){
	var y=0, x=0, temp={x:Infinity, y:Infinity}, flag=Infinity, name;
	for(var n=0; n < this.size.length ; n++){
		if(flag == 0){
			x=temp.x;
			y=temp.y;
		}
		flag=flag-1;
		if(x > box.row-1){ //换行
			x=0;
			y++;
		}
		name=x+'_'+y;  //对象属性名（反映占领的格子）
		if(this.hasN(name)) {  //判断属性名是否存在
			n--;
			x++;
			if(flag<Infinity) flag=flag+1;
			continue;
		}
		if(!this.size[n].length){  //普通格子
			this.obj[name]=[x,y];  //（反映坐标值）
			x++;
		}
		else{  //大格子
			if(this.over(x,y,n)) {
				if(temp.y > y){
					temp.y = y;
					temp.x = x;
				}
				if(temp.y < Infinity){
					flag=1;
				}
				n--;
				x++;
				continue;
			}
			this.obj[name]=[x,y];
			this.apply(x,y,n);
			x+=this.size[n][0];
		}
		if(flag==-1) {
			flag = 	Infinity;
			temp.y = Infinity;
			temp.x = Infinity;
		}
		var h=this.size[n][1]-1 || 0;
		box.maxY=(box.maxY > y+h)? box.maxY : y+h;
	}
	for(var i in this.obj){
		if(this.obj[i]===0 || !this.obj.hasOwnProperty(i)) continue;
		this.oArray.push(this.obj[i]);
	}
	box.put(el);
};
box.hasN=function(n){
	return n in this.obj;
};
box.over=function(x,y,n){  //判断是否会重叠
	var name;
	if(x+this.size[n][0] > this.row) return true; //超出显示范围
	for(var k=1; k<this.size[n][1];k++){
		name=x+'_'+(y-0+k);
		if(this.hasN(name)) {return true;}  //左侧一列有无重叠
	}
	for(k=1; k<this.size[n][0];k++){
		name=(x-0+k)+'_'+y;
		if(this.hasN(name)) {return true;}  //上侧一行有无重叠
	}
	return false;
};
box.apply=function(x,y,n){  //大格子中多占的位置
	var posX=x, //大格子左上角位置
		posY=y;
	for(var t=0; t<this.size[n][0]; t++) {
		for(var k=0; k<this.size[n][1]; k++){
			name=(posX+t)+'_'+(posY+k);
			if(t==0 && k==0) { continue; }
			this.obj[name]=0;   //多占的格子无坐标值
		}
	}
};
box.put=function(el){
	var x,y;
	for(var i =0;i< this.oArray.length; i++){
		x=box.gen.w*this.oArray[i][0];
		y=box.gen.h*this.oArray[i][1];
		box.mbox[i].style.cssText = "position:absolute;left:"+ x +"px;top:" + y + "px;";
	};
	el.style.height= box.gen.h*(box.maxY+1) +'px';
};
</script>
</head>
<body>
<div id="myWidget" class="myWidget"></div>
<script>
var myWidget = $id("myWidget");
//创建随机内容
var content = '';
for(i = 0; i < 20; i++) {
	if(!(Math.random()*5 >> 0)){
		height = Math.floor(Math.random()*200 + 100);
		width = Math.floor(Math.random()*200 + 100);
		content += '<div class="MBox"><div class="widgetBox bigBox"><div style="width:' + width +'px;height:' + height +'px;margin:0 auto;" class="innerBox">'+ i +'</div></div></div>';
	}else{
		content += '<div class="MBox"><div class="widgetBox">'+ i +'</div></div>';
	}
};
myWidget.innerHTML = content;
//绑定拖动元素
initDrag(myWidget);
window.onresize = function(){box.init(myWidget)};
</script>
</body>
</html>

二列左列宽度固定，右列宽度自适应布局的四种方法

Typing…

ONEBOYS — Thu, 28 Jul 2011 13:21:38 +0000

最近一个多月都比较忙，没什么时间精力更新blog，现在终于闲下来了。
之前有个朋友发给我一个打字机的效果，蛮有感觉的，不过那是用VBscript写的…
而下面的这个demo里除了打字的效果，还结合了以前这个：我是谁里的效果。
至于里面的心形图案，是我一个一个取出坐标得到的，如果你对心形图案还有兴趣，还可以看看这篇文章笛卡尔情书的秘密。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Typing...</title>
<style type="text/css">
*{padding:0;margin:0;}
body
{font-family:'MS Gothic';line-height: 1.8;font-size: 15px;color: #444;padding:10px;}
#avatar{position:relative;width:800px;word-wrap:break-word;margin:0 auto;}
b{font-weight:normal;display:none;}
</style>
</head>
<body>
<div id="avatar">
<p>我们都一样</p>
<p>推开窗看见星星,依然守在夜空中。</p>
<p>心中不免多了些,暖暖的感动。</p>
<p>一闪一闪的光,努力把黑夜点亮，气氛如此安详。</p>
<p>你在我的生命中,是那最闪亮的星。</p>
<p>一直在无声夜空,守护着我们的梦。</p>
<p>这世界那么大,我的爱只想要你懂。</p>
<p>陪伴我孤寂旅程。</p>
<p>你知道我的梦,你知道我的痛。</p>
<p>你知道我们感受都相同。</p>
<p>就算有再大的风,也挡不住勇敢的冲动。</p>
<p>努力的往前飞,再累也无所谓。</p>
<p>黑夜过后的光芒有多美。</p>
<p>分享你我的力量,就能把对方的路照亮。</p>
<p>我想我们都一样,渴望梦想的光芒。</p>
<p>这一路喜悦彷徨,不要轻易说失望。</p>
<p>回到最初时光,当时的你多么坚强。</p>
<p>那鼓励让我难忘。</p>
<p>你知道我的梦,你知道我的痛。</p>
<p>你知道我们感受都相同。</p>
<p>就算有再大的风,也挡不住勇敢的冲动。</p>
<p>努力的往前飞,再累也无所谓。</p>
<p>黑夜过后的光芒有多美。</p>
<p>分享你我的力量,就能把对方的路照亮。</p>
</div>
<span id="cursor">|</span>

<script>
var $id=function(o){return document.getElementById(o) || o};
var g=$id('avatar');
var cursor=$id("cursor");
var init=function ()
{
	var n=0, l=g.innerHTML, s='';
	while (n<l.length)
	{
		var r=l.charAt(n);
		if (r==' ') { s+=r; n++}
		if (r=='<') while (l.charAt(n-1)!='>') s+=l.charAt(n++);
		s+='<b>'+l.charAt(n++)+'</b>';
	}
	g.innerHTML=s;
};
var Wt={};
Wt.n = 0,
Wt.i = 0;
Wt.p = g.getElementsByTagName("p");
Wt.loop=function(){
	if( Wt.n >= Wt.p.length ) {
		window.scrollTo(0,0);
		pos();
		anim();
		cursor.innerHTML='';
		g.onclick=anim;
		return false;
	};
	Wt.p[Wt.n].appendChild(cursor);
	var _loop=function(){
		var m = Wt.p[Wt.n].getElementsByTagName("b");
		if(Wt.i < m.length ){
			setTimeout(function(){
				m[Wt.i].style.display='inline';
				Wt.i++;
				_loop();
			},300);
		}
		else{
			setTimeout(function(){
				Wt.i=0;
				Wt.n++;
				Wt.loop();
			},300);
		}
	};
	_loop();
};
var glint=setInterval(function(){
	cursor.style.display = (cursor.style.display=="none") ? "inline" : "none";
},500);
var xo=[], yo=[], xd=[], yd=[], e=[], an=-1, dir=-1 , t=0;
var d='6=.6>&5&84OF4(@4*?3*J3-53*>3-B3*13G%44&5),6.D6377E%8.B;.0;3J?$+>E<B))B;@EG*F%-I0>I6AM&>M,=Q),PJ;T:DT@5X1$X60[NO[T,_8B_=8b16b)3eC)e!?i,Gh3!l><kD,o*Go!!r0)r%>u54t92w=+v@=y+HxGF6H86248D+8-G6H/8G-7-889C8677<>8748E?8D79C1;0C86+:6&;/0;>$=)?<#$=*#<H%=*;=!(=*G:5(=++=!?=+7<<HA9;<HD?3*=GDAF3>C5A9#>E$A9/A03A:!B!@A:8@1?B+AA/1BE&B-)BO2A/OA83A/GA8BE>/E0DB.FF.#CE%F-3E>8F,OE>EF,CF#<F,7E?)F-?E?3F,+F0AHB-H*(F+GE@6J:GG.>J;-I65J<!J2#J<-J2%J01J2/J<9J=GJ=*J39J;@J2GJ;4J2;I65O.<K0@LCBL9$O.BL.!O/;M,/NJ7N@@O#4NA#O0+NA/P,HO&HO07O&<P!ANA>Q,$Q.=S>)RC=S=ES4,S>6RDCS>ARD)S?%S(HT!OT22S?1U/&T=1V!*X%#T@&X%/V!*X%;X5(X%HWCCX&+WC8X&7X(JX30WC,ZE4W8,ZE@WE$ZF$ZH%[P1[R0[P=[R<[]3[RJ[]@[S/]%.[S:_,8[SF_ED]@4_,OaBD_-3^27_::a6<`7@`9/a*?c$(`:#`6D`FFcH;`!>c<3e,Bc<JdH:e7@e-:fB.e!4h$$fC(h1(i/)h1%i#!h/Hh2-h/>h2;i:,mJ9jDCm%0kB$l@Ol39l(2n-@p*7o+Ar%#p)7r%,q3!u63s!>t85z6)v@*sGCr$;pO0n.Ak62h=GdGGd:Oc$4a);_.1]@)[,!Z.AW6&W)DT$<RO3P.BO>#MB8L8AK!HHO)H5JF;3E=:CC&C)D@$F?@&<GG;J)9C#9)A6=.6>&5&84OF4(@4*?3*J3-53*>3-B3*13G%44&5),6.D6377E%8.B;.0;3J?$+>E<B))B;@EG*F%-I0>I6AM&>M,=Q),PJ;T:DT@5X1$X60[NO[T,_8B_=8b16b)3eC)e!?i,Gh3!l><kD,o*Go!!r0)r%>u54t92w=+v@=y+HxGF6=.6>&5&84OF4(@4*?3*J3-53*>3-B3*13G%44&5),6.D6377E%8.B;.0;3J?$+>E<B))B;@EG*F%-I0>I6AM&>M,=Q),PJ;T:DT@5X1$X60[NO[T,_8B_=8b16b)3eC)e!?i,Gh3!l><kD,o*Go!!r0)r%>u54t92w=+v@=y+HxGF';
function pos(){
	e=g.getElementsByTagName('b');
	for (n=0; n<e.length; n++)
	{
		xo[n]=e[n].offsetLeft;
		yo[n]=e[n].offsetTop;
		var p=d.charCodeAt(n*3)*1600+d.charCodeAt(n*3+1)*40+d.charCodeAt(n*3+2)-78768;
		yd[n]=p%500;
		xd[n]=(p-yd[n])/500;
	}
	for (n=0; n<e.length; n++)
	{
		e[n].style.position='absolute';
		e[n].style.left=xo[n]+'px';
		e[n].style.top=yo[n]+'px';
	}
};
function ani()
{	t=e.length;
	for (var n=0; n<t; n++)
	{
		if ((an-n<=30)&&(an-n>=0))
		{
			var b=(Math.cos((((an-n)*Math.PI)/30))+1)/2;
			var a=1-b;
			e[n].style.left=((yd[n]+111)*a+xo[n]*b)+'px';
			e[n].style.top=((xd[n]+74)*a+yo[n]*b)+'px';
		}
	}
	an+=dir;
	if ((an-t<=30)&&(an>=0))
	{
		window.setTimeout("ani()", 20);
	}
};
function anim()
{
	dir*=-1;
	if ((an<0)||(an-t>30)) ani();
};
init();
Wt.loop();
</script>
</body>
</html>

No related posts. From:

Google电吉他扩展版——可智能识别曲谱

ONEBOYS — Sun, 19 Jun 2011 03:48:52 +0000

姗姗来迟，还请见谅。
在6月9号Google 放出的纪念电吉他之父莱斯·保罗 96 周年诞辰的电吉他Doodle代码上，扩展了这个可播放曲谱的版本。
做这个扩展版的初衷是为了方便不是很熟悉键盘的童鞋。
童鞋们可以从网上复制曲谱进来自动播放（如果读者能自己谱曲，那真的就太棒了）。
曲谱中的空格及所有非法字符都表示停顿，间隔越大表示停顿越长，也可以调整曲子的整体节奏快慢。
同时可以开启自带的录音功能，录制之后会生产网址，可以拿来同朋友分享(由于国内网络环境的问题，网址生产可能会有限滞后)。
代码方面删除了不相干的部分，并做了格式整理，但由于原代码是经过压缩的，所以阅读起来还是会很费力的，很多地方处理的挺复杂，能力有限也不便做代码分析。
以下就是全部的代码（24k的code，1张图片，1个声音的flash文件）：

<!doctype html>
<meta charset='utf-8' />
<title>google电吉他扩展版——可播放曲谱</title>
<style>
#lga{width:500px;margin:0 auto;}
#hplogo:active,#hplogo:focus{outline:none}#hplogo-g{background:url(http://cssass.com/blog/resource/guitar/guitar11-hp-sprite.png) no-repeat 0 0;height:175px;position:relative;width:474px}#hplogo-click{background:url(http://cssass.com/blog/resource/guitar/guitar11-hp-sprite.png) no-repeat -2000px -2000px;cursor:pointer;height:130px;left:0;position:absolute;top:0;width:474px}#hplogo-lcd{height:30px;left:70px;position:absolute;top:129px;width:200px}#hplogo-lcd-icon{background:url(http://cssass.com/blog/resource/guitar/guitar11-hp-sprite.png) no-repeat -580px -162px;cursor:pointer;height:0;position:absolute;width:0}#hplogo-lcd-text{background:transparent;border:0 none;color:#666;cursor:text;font-family:"VT323",arial,sans-serif;font-size:14px;left:77px;position:absolute;top:134px;text-decoration:none;width:182px}#hplogo-lcd-screen{background:url(http://cssass.com/blog/resource/guitar/guitar11-hp-sprite.png) no-repeat -2000px -2000px;height:20px;left:52px;position:absolute;top:134px;width:214px}#hplogo-on{background:url(http://cssass.com/blog/resource/guitar/guitar11-hp-sprite.png) no-repeat -2000px -2000px;height:37px;left:272px;position:absolute;top:123px;width:62px}#hplogo-led{background:url(http://cssass.com/blog/resource/guitar/guitar11-hp-sprite.png) no-repeat -2000px -2000px;height:21px;left:292px;position:absolute;top:133px;width:21px}.hplogo-str{background:url(http://cssass.com/blog/resource/guitar/guitar11-hp-sprite.png) no-repeat -530px -60px;height:20px;position:absolute;width:255px}#hplogot{-webkit-box-shadow:5px 5px 10px #ddd;-moz-box-shadow:5px 5px 10px #ddd;box-shadow:5px 5px 10px #ddd;-webkit-transition:opacity 0.5s ease-out;-moz-transition:opacity 0.5s ease-out;-o-transition:opacity 0.5s ease-out;transition:opacity 0.5s ease-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:#ffffca;border:1px solid #b5b5b5;cursor:pointer;display:none;font:normal 9pt arial,sans-serif;left:128px;opacity:0;padding:2px 3px;position:absolute;top:16px;white-space:nowrap}
.opern{width:480px;height:40px;}
</style>
<body onload="document.f.q.focus();" >
<div id=xjsc></div>
<div id=lga>
<div id=hplogo border=0>
	<div id=hplogo-g>
		<div id=hplogo-click ></div>
		<div id=hplogo-lcd-screen></div>
		<div id=hplogo-lcd-icon></div>
		<input id=hplogo-lcd-text value="" autocomplete=off onclick="this.focus();this.select()" readonly=readonly>
		<div id=hplogo-on></div>
		<div id=hplogo-led></div>
		<div id=hplogot>Les Paul's 96th Birthday</div>
	</div>
</div>
<form name=f><textarea class='opern' name=q >3688368 77653 2226235 37753 3688368 00989 00989987 53566

节奏：

可以运行以上代码，也可以访问这个链接：http://cssass.com/blog/resource/guitar/

最后罗列一些网上流传的曲谱：
欢乐颂：

uuiooiuyttyuuyy uuiooiuyttyuytt yyutyuiutyuiuytyw uuiooiuyttyuytt

爱情买卖：

3688368 77653 2226235 37753 3688368 00989 00989987 53566

茉莉花：

eetyiiyttyt eetyiiyttyt tttetyyt ewetewqqwq ewqwetyit ewetewqqwq

义勇军进行曲：

qr rrrqwer r yrtyi i yyryiytt o i t y iy iytyr y qwrryyiittw t qr ry yi rtiio i yriiiy r q r yriiiy r q r q r q r r

沧海一声笑:

pouyt uytew wewetyuopppou

童年：

35553 6676 66588886865 355536676 66658888668 9~

上海滩：

356666，352222，356865132

一闪一闪亮晶晶

1155665 4433221 5544332 5544332 1155665 4433221；

天空之城

6787807 365685 254573 874477 6787807 365685 34878908 876756 1232352
5878007 678789855 43213 376321 21253 376321 21276

春江花月夜

H-HHK-LHG～G-G-H-KLD～D-SDG-DGH～KL-;-K-L;LKH-G～

隐形的翅膀

358787 6568321 11186532122 358787 6568321 1118653211

可以复制曲谱到文本框中直接播放。欢迎读者提供更精彩的乐谱。

模拟引力环境下的运动轨迹

offsetLeft/Top Bug in Firefox

ONEBOYS — Mon, 17 Jan 2011 03:06:56 +0000

之前在这篇文章offsetX/Y for Firefox中有顺带提到ie6,ie7对于offsetLeft的不标准行为。

<!doctype html>
<html>
<head>
<style>
*{padding:0;margin:0;}
body{padding:50px;}
#a{width:500px;height:500px;background:#ccc;padding:50px;}
#b{width:400px;height:400px;background:#ddd;padding:50px;}
#c{width:300px;height:300px;background:#eee;padding:50px;}
</style>
</head>
<body>
<div id='a' style='position:relative;'>
	a
	<div id='b'>
	b
		<div id='c'></div>
	</div>
</div>
</body>
<script>
	$id=function(o){return document.getElementById(o) || o }
	$id('c').innerHTML='c的offsetLeft=' + $id('c').offsetLeft
</script>
</html>

obj.offsetLeft是相对与“offsetParent”的距离，按标准应该是距其上级中定位元素的距离(如果不存在这个元素，则相对于整个页面文档)。
而对于ie6,ie7，obj.offsetLeft是相对其直接父级的距离——显然他们没有遵循标准。

而今天提到的兼容问题则要归咎于firefox的不合群。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>offsetLeft in Firefox</title>
</head>
<body>
<style type="text/css">
*{padding:0;margin:0;}
#wrap{position:relative; width:500px; height:100px; overflow:hidden; border:10px solid #999;}
#scrolllist{position:absolute; top:0px; left:0px; width:50px;height:100px;background:#ccc;}
</style>
<div id="wrap">
  <ul id="scrolllist">
  </ul>
</div>
<script>
function $(id){return document.getElementById(id);}
$('scrolllist').innerHTML=$('scrolllist').offsetLeft;
</script>
</body>
</html>

当子级相对于父级绝对定位，而父级又有这两个属性：overflow:hidden; border:10px solid #999;时，
在firefox看来，子级的offsetLeft就需要再减去border值。很怪异的解释。

我是谁

ONEBOYS — Fri, 31 Dec 2010 10:14:41 +0000

下面的代码里隐藏着一个秘密。
这个秘密将会告诉你我是谁!

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Who am I</title>
<style type="text/css">
body
{
font-family: '微软雅黑';
line-height: 2;
font-size: 18px;
color: #444;
}
b{font-weight:normal;}
</style>
</head>
<body>
<div id="avata" style="width:50%;word-wrap:break-word;cursor:pointer;" onclick="anim()">王某人，自号【步舞之鹤】，洋诨【ONEBOYS】，八六年生人，籍贯义乌，师出浙林，寄居杭州。混迹互联网、IT界二年余，以捣鼓前端为业。英俊潇洒不足，博学多才欠精。为人善良，外冷内热。性格优柔寡断，善思不善断，善听不善言，十足的低调焖烧型青年。喜体验互联网新事物，好学习崇拜达人牛爷。业余网球爱好者，浙大紫荆港网球场每周六午后，逢无事必到。个人blog：cssass.com。僻野茅庐，若劳大驾，不胜惶恐。</div>
<script type="text/javascript">/*<![CDATA[*/
var d='43#43643F44)44745!45345G:%6?>6E/6JH6P,JU96X1JF8(F89F9#F90F9HF:1F:AX01X0?X0OX18X23X2DX3/X3@1%E6%@:45?@C?A+;&2>CODA0I@JO%6M71LFAW*1V9BU0+55D56.56=56O578;@>AJ>H9*N**SO>Y&BXO,XO?Y()Y(;1B46)43$F3%03%B3&,3&=3&O1E86E9=J#=J5=JE=>C=?-=??=@(=@:82#C;7H;,JB@JC,JC=JCOJD:JE#JE4DF<O7<U(<ZA<U&BTO,TO>U((U(OU):U*$43#43643F44)44745!45345G:%6?>6E/6JH6P,JU96X1JF8(F89F9#F90F9HF:1F:AX01X0?X0OX18X23X2DX3/X3@1%E6%@:45?@C?A+;&2>CODA0I@JO%6M71LFAW*1V9BU0+55D56.56=56O578;@>AJ>H9*N**SO>Y&BXO,XO?Y()Y(;1B46)43$F3%03%B3&,3&=3&O1E86E9=J#=J5=JE=>C=?-=??=@(=@:82#C;7H;,JB@JC,JC=JCOJD:JE#JE4DF<O7<U(<ZA<U&BTO,TO>U((U(OU):U*$43#43643FU(OU):U*$';
var xo=[], yo=[], xd=[], yd=[], e=[], an=-1, dir=-1 , t=0;
var e;
function i()
{
	var n=0, g=document.getElementById('avata'), l=g.innerHTML, s='';
	while (n<l.length)
	{
		var r=l.charAt(n);
		if (r==' ') {s+=r; n++}
		if (r=='<') while (l.charAt(n-1)!='>') s+=l.charAt(n++);
		s+='<b>'+l.charAt(n++)+'</b>';
	}
	g.innerHTML=s;
	e=document.getElementById('avata').getElementsByTagName('b');
	for (n=0; n<e.length; n++)
	{
		xo[n]=e[n].offsetLeft;
		yo[n]=e[n].offsetTop;
		var p=d.charCodeAt(n*3)*1600+d.charCodeAt(n*3+1)*40+d.charCodeAt(n*3+2)-78768;
		yd[n]=p%500;
		xd[n]=(p-yd[n])/500;
	}
	for (n=0; n<e.length; n++)
	{
		e[n].style.position='absolute';
		e[n].style.left=xo[n]+'px';
		e[n].style.top=yo[n]+'px';
	}
}
function ani()
{	t=parseInt(e.length/4)+2;
	for (var n=0; n<t; n++)
	{
		m=e.length-1-n;
		if ((an-n<=30)&&(an-n>=0))
		{
			var b=(Math.cos((((an-n)*Math.PI)/30))+1)/2;
			var a=1-b;
			for (i=0; i<=t; i+=t)
			{
				e[n+i].style.left=((yd[n+i]+111)*a+xo[n+i]*b)+'px';
				e[n+i].style.top=((xd[n+i]+74)*a+yo[n+i]*b)+'px';
				e[m-i].style.left=((yd[m-i]+111)*a+xo[m-i]*b)+'px';
				e[m-i].style.top=((xd[m-i]+74)*a+yo[m-i]*b)+'px';
			}
		}
	}
	an+=dir;
	if ((an-t<=30)&&(an>=0))
	{
		window.setTimeout("ani()", 30);
	}
}
function anim()
{
	dir*=-1;
	if ((an<0)||(an-t>30)) ani();
}
i();
/*]]>*/
</script>
</body>
</html>

其实，以上DEMO，代码基本上都来自 Román Cortés,就是那个只用了1K字符写出3D圣诞树的家伙。

附：

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<style>
textarea{width:600px;height:60px;font-size:12px;}
</style>
</head>
<body>
<p>源坐标：<textarea id='e'>

存坐标：

解坐标：

新年来临，这篇博文也就是我2010年的关门之作。
祝大家新的一年里新年新气象。

No related posts. From:

模拟引力环境下的运动轨迹

ONEBOYS — Sat, 28 Aug 2010 03:13:26 +0000

话说这篇文章的起源还得从1643年1月4日谈起。这一天，一位引领人类认知世界的巨人诞生了，他就是艾萨克·牛顿（Isaac Newton）。
扯远了，就近一点：2010年1月4日，为了纪念牛顿，google设计了一个Google Doodles
看这里：今日google纪念logo,典型的物理运动实现
进口审核剪切版：

<input type="button" value="demo" onclick="demo()" />

<script type="text/javascript">
function demo(){
	var h=1,k=-0.5,f=document.getElementById('fall'),
		i=setInterval(function(){
			if(f){
				var y=parseInt(f.style.top) + h;
				if(y<210) {h+=2}
				else{
					h*=(h>1)?k:0
				}
				f.style.top=y+'px';
			}
			if(h==0){clearInterval(i);h=1;}
		},25);
}
</script>

随后，我便模拟了一个重力环境下的抛物线运动：

  <!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>模拟重力环境下的抛物运动（假使1px==1mm）</title>
<style type="text/css">
	*{padding:0;margin:0;}
	html,body{height:100%;overflow:hidden;}
	p{margin:2px;font-size:12px;}
	label{display:inline-block;width:80px;text-align:right;}
	input{width:80px;}
	.wrap{position:relative;width:800px;height:500px;margin:5px;border:1px solid #ccc;}
	#fall{width:20px;font-size:0;height:20px;background:orange;position:absolute;top:0;left:0;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}
</style>
</head>
<body>
<p><label>横向初速度：</label><input id="Vx" type="text" value="3" />px/ms</p>
<p><label>纵向初速度：</label><input id="Vy" type="text" value="0" />px/ms</p>
<p><label>重力加速度：</label><input id="a" type="text" value="0.0098" />px/平方ms</p>
<p>（如果这个加速度是一个随时间变化的值，就能达到其他非匀加速运动的效果了。）</p>
<p><label>单位时间：</label><input id="t" type="text" value="10" />（记录运动的时间间隔）
<p><button type="button"  onclick="demo()">演示</button></p>
<div class="wrap">
<div id="fall">o</div>
</div>
</body>
<script type="text/javascript">
var $id=function(o) {
	return document.getElementById(o) || o;
}
var demo=function() {
	var x=$id('Vx').value,
		y=$id('Vy').value,
		a=$id('a').value,
		t=$id('t').value;
		shoot(x,y,a,t);
}
var shoot=function(x,y,a,t) {
	var f=document.getElementById('fall');
	var Vx=parseInt(x),
		Vy=parseInt(y),
		g=a,
		t=parseInt(t),
		h=0,l=0,Sx=0,Sy=0;
	var i=setInterval(function(){
		if(f){
			Sx+=Vx*t;
			l=Sx;
			Vy+=g*t;
			h+=Vy*t;
			if(h>480) {
				h=480;
				clearInterval(i);
			}
			if(l>780) {
				l=780;
				clearInterval(i);
			}
			f.style.left=l+'px';
			f.style.top=h+'px';
		}
	},t);
}
</script>
</html>

模拟采用的公式

V=V0+aT;
S=S0+VT;
T：运动的时间间隔，是固定值。

这个公式有别于那种运动模拟中常用的补间动画公式（tween算法）。
补间动画是需要事先确定总路程，和总时间的，
而我们模拟的运动轨迹没有事先计算，因为我们运动中间或许还有一些变数，比如撞击，主动改变方向（键盘控制）等等，所以我觉得这个物理公式更能模拟出真实的各种运动。

直至本月前两天，某同事向我展示了这个：
重力版google(浏览首选chrome,safari,次选opera,firefox,若是ie9以下请无视)
膜拜啊。js且不论，css3已经大量使用了。我还只局限用用阴影，圆角呢。

不才，也做一个关于落体，撞击，摩擦的简单模拟。以表膜拜。

 <!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>模拟引力环境下的撞击、摩擦、落体运动</title>
<style type="text/css">
	*{padding:0;margin:0;}
	html,body{height:100%;overflow:hidden;}
	p{margin:2px;font-size:12px;}
	label{display:inline-block;width:80px;text-align:right;}
	input{width:80px;}
	#fall{width:20px;font-size:0;height:20px;background:orange;position:absolute;top:50px;left:400px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}
</style>
</head>
<body>
<p><label>横向初速度：</label><input id="Vx" type="text" value="3" />px/ms</p>
<p><label>纵向初速度：</label><input id="Vy" type="text" value="0" />px/ms</p>
<p><label>重力加速度：</label><input id="a" type="text" value="0.01" />px/平方ms</p>
<p><label>单位时间：</label><input id="t" type="text" value="10" />（记录运动的时间间隔）
<p>(摩擦，碰撞的消耗并没有按公式进行计算，纯属于杜撰，是不符合规律的，仅仅是模拟。)</p>
<p><button type="button"  onclick="demo()">演示</button> <button type="button"  onclick="document.location.reload()">重置(可拖动放置)</button></p>
<div id="fall" onmousedown='drag(this,event)'>o</div>
</body>
<script type="text/javascript">
var $id=function(o) {
	return document.getElementById(o) || o;
}
var demo=function() {
	var x=$id('Vx').value,
		y=$id('Vy').value,
		a=$id('a').value,
		t=$id('t').value;
		shoot(x,y,a,t);
}
var shoot=function(x,y,a,t) {
	if(i) {alert(1);clearInterval(i)};
	var f=document.getElementById('fall');
	var Vx=parseFloat(x),
		Vy=parseFloat(y),
		g=parseFloat(a),
		h=f.offsetTop,
		Sx=f.offsetLeft,
		l=0,
		t=parseInt(t);
	var i=setInterval(function(){
		if(f){
			Sx+=Vx*t;
			l=Sx;
			Vy+=g*t;
			h+=Vy*t;
			if(h>=document.documentElement.offsetHeight-f.offsetHeight) {  //底部
				h=document.documentElement.offsetHeight-f.offsetHeight;
				Vx=(Math.abs(Vx)-0.1 < 0) ? 0 : Vx/Math.abs(Vx) * (Math.abs(Vx)-0.1)   //摩擦消耗x速度
				Vy=(Math.abs(Vy)-0.8 < 0) ? 0 : -(Math.abs(Vy)-0.8);                   //撞击消耗y速度
				if(Math.abs(Vy)==0 && Math.abs(Vx)==0 ) {clearInterval(i);}            //x,y速度为0时，clear
			}
			if(l<0 || l>document.documentElement.offsetWidth-f.offsetWidth) {  //左右两侧
				Sx=(l<0) ? 0 : document.documentElement.offsetWidth-f.offsetWidth;
				Vx=(Math.abs(Vx)-0.2 < 0) ? 0 : -Vx/Math.abs(Vx) * (Math.abs(Vx)-0.2)  //撞击消耗x速度
			}
			f.style.left=l+'px';
			f.style.top=h+'px';
		}
	},t);
};
var drag=function(o,e){ //拖曳位置，与运动模拟无关
	var e = e ? e : window.event;
	if(!window.event) {e.preventDefault();}
	var tX=o.offsetLeft,
		tY=o.offsetTop,
		dx=e.clientX,
		dy=e.clientY;
	document.onmousemove=function(e){
		var e = e ? e : window.event;
		o.style.left=tX+e.clientX-dx+"px";
		o.style.top=tY+e.clientY-dy+"px";
	}
	document.onmouseup=function(){
		document.onmousemove=null;
		document.onmouseup=null;
	}
}
</script>
</html>

对于这个运动的模拟，我觉得以后倒是可以扩展出一些挺有趣的交互游戏的模拟。比如，射击啊，驾驶啊等等，当然纯属娱乐啦。

Google电吉他扩展版——可智能识别曲谱

google suggestion效果的键盘鼠标事件

ONEBOYS — Mon, 23 Aug 2010 07:49:30 +0000

google的suggestion功能是一个非常棒的用户体验创新，相信你之前也已经使用过了。不过由于某些原因，国内现在却不能使用这个功能了。
不过,你还可以在baidu上使用相同的功能。对于好点子好创意，模仿学习并不是件坏事。

以下demo，我抛弃suggestion的核心ajax，只是做一下鼠标键盘事件的演示。

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<style type='text/css'>
.sugg{position:relative;font-size:12px;}
.sugg a{text-decoration:none;}
.sugg .text{width:210px;height:18px;padding:3px;color:#474747;border:1px solid #ADCAD8;}
#suggestion{display:none;position:absolute;top:26px;left:0;width:216px;border:1px solid #3890d0;border-top:0;background:#fff;}
#suggestion a{display:block;height:25px;line-height:25px;padding:0 5px;color:#000;}
#suggestion a img{vertical-align:middle;}
#suggestion #hover{background:#378ece;color:#fff;}
</style>
</head>
<body>
<div class='sugg'>
	<form id='suggF' action="http://www.baidu.com/baidu" onsubmit="document.charset='GBK';sug.hide()" accept-charset='GBK' target="_blank">
		<input class='text' type=text name=wd autocomplete="off" onkeydown="pressKey(this,event)" />
		<input id='sub' type="submit" value="搜索" />
	</form>
	<div id='suggestion'>
		<a href='javascript:;' onmouseover="sug.hover(this);" onclick="sug.select();">思思</a>
		<a href='javascript:;' onmouseover="sug.hover(this);" onclick="sug.select();">芊芊</a>
		<a href='javascript:;' onmouseover="sug.hover(this);" onclick="sug.select();">cssass</a>
		<a href='javascript:;' onmouseover="sug.hover(this);" onclick="sug.select();">敏敏</a>
		<a href='javascript:;' onmouseover="sug.hover(this);" onclick="sug.select();">黎黎</a>
	</div>
</div>
suggestion显示之后，使用方向键或鼠标进行选择。
</body>
<script type='text/javascript'>
var $id=function(o){
	return document.getElementById(o) || o;
}
var pressKey=function(o,e){
	var e = e ? e : window.event;
	var k = e.keyCode;
	switch(k){
		case 9 :  //tab键
		case 13 : return false; //回车键
		default : sug.show(o,k); break;
	}
}
var sug={
	show:function(o,k){
		/* 此时动态读取suggestion数据（略）*/
		document.getElementById('suggestion').style.display='block';
		document.onclick=function(){sug.hide()};
		if (k != 38 && k != 40 && k != 39 && k != 37) { //非方向键
			 sug.i = -1;
		}
		sug.i = sug.i || 0;
		var list = $id('suggestion').getElementsByTagName("a");
		var prev = '';
		switch(k){
			case 38:
				sug.clear();
				if (sug.i < 1) {
					sug.i = list.length
				}
				sug.i--;
				list[sug.i].id = "hover";
				o.value = list[sug.i].innerHTML;
				return false;
			case 40:
				sug.clear();
				if (sug.i == list.length - 1) {
					sug.i = -1
				}
				sug.i++;
				list[sug.i].id = "hover";
				o.value = list[sug.i].innerHTML;
				return false;
			default : break;
		}
		sug.hover=function(othis){ //鼠标划过
			sug.clear();
			for(i=0;i<list.length;i++){
				if(othis==list[i]){
					sug.i=i;
					list[sug.i].id="hover";
					o.value = othis.innerHTML;
					return ;
				}
			}
		}
		sug.clear=function(){
			prev = $id('hover');
			if (prev) prev.id = '';
		}
		sug.select=function(){ //鼠标选中
			document.charset='GBK';
			$id('suggF').submit();
		}
	},
	hide:function(){
		$id('suggestion').style.display='none';
	}
};
</script>
</html>

No related posts. From:

offsetX/Y for Firefox

ONEBOYS — Thu, 29 Jul 2010 08:18:08 +0000

现在的相册大多有这个功能，鼠标点在照片的左边，可以跳到上一张，点到右边则跳到下一张。
这就需要一个坐标点的计算：(鼠标相对图片的位置) vs (图片的尺寸/2)。
后一个(图片的尺寸/2)简单，使用obj.offsetWidth/2。
前一个(鼠标相对图片的位置)好像也简单，有个事件属性叫 event.offsetX。
但是很悲剧，firefox并不支持offsetX！

我们要做的就是将offset计算出来，它的值应该等于【鼠标相对窗口左边境的位置(即event.clientX)】减去【图片到窗口左边境的距离】。
莫非后一项（图片到窗口左边境的距离）就是obj.offsetLeft吗？

但是又悲剧，obj.offsetLeft并没有这么简单，他是相对于“offsetParent”的距离，即应该是距其上级中定位元素的距离(如果不存在这个元素，则相对于整个页面文档)。
更糟的是：对于ie6,ie7，obj.offsetLeft是相对其直接父级的距离——显然他们没有遵循标准。

<!doctype html>
<html>
<head>
<style>
*{padding:0;margin:0;}
body{padding:50px;}
#a{width:500px;height:500px;background:#ccc;padding:50px;}
#b{width:400px;height:400px;background:#ddd;padding:50px;}
#c{width:300px;height:300px;background:#eee;padding:50px;}
</style>
</head>
<body>
<div id='a' style='position:relative;'>
	a
	<div id='b'>
	b
		<div id='c'></div>
	</div>
</div>
</body>
<script>
	$id=function(o){return document.getElementById(o) || o }
	$id('c').innerHTML='c的offsetLeft=' + $id('c').offsetLeft
</script>
</html>

经过以上分析，我们可以使用以下这个麻烦的办法：从触发元素开始到root节点为止，把各级offsetParent元素的offsetLeft加起来得到【图片到窗口的距离】。
对，排除投机的办法，唯有这样了。参见：Differences in the event object properties/methods(请搜索pageX)（这里你可以注意一下：当元素是定位元素时候，即relative/absolute元素。那私有属性layerX就等于非firefox浏览器下的offsetX——这便是投机的方法，但不失为一个简单的好方法。）

demo:

<!DOCTYPE html>
<html>
<head>
<title>兼容firefox的offsetX</title>
<style type="text/css">
.box{width:300px;height:150px;border:1px solid #ccc;margin:50px;padding:50px;border:3px solid #ccc;font-size:12px;}
.ruler{position:relative;}
</style>
</head>
<body>
<div class='box'>
	
	<div id='ct'></div>
</div>
<script type='text/javascript'>
var $id=function(id){
	return document.getElementById(id) || id;
}
function sizer(e){
	var e=window.event || e,
		posX=(e.offsetX==undefined) ? getOffset(e).offsetX : e.offsetX ;
		$id('ct').innerHTML='offsetX:'+posX + ' <i>(FF不支持，但通过其他方法获取)</i>'
+'<br />clientX:' +e.clientX
+'<br />layerX:' +e.layerX + ' <i>(ie,opera不支持)</i>'
+'<br />pageX:'+ e.pageX + ' <i>(ie不支持)</i>'
;
}
function getOffset(e)
{
  var target = e.target;
  if (target.offsetLeft == undefined)
  {
    target = target.parentNode;
  }
  var pageCoord = getPageCoord(target);
  var eventCoord =
  {     //计算鼠标位置（触发元素与窗口的距离）
    x: window.pageXOffset + e.clientX,
    y: window.pageYOffset + e.clientY
  };
  var offset =
  {
    offsetX: eventCoord.x - pageCoord.x,
    offsetY: eventCoord.y - pageCoord.y
  };
  return offset;
}
function getPageCoord(element)    //计算从触发到root间所有元素的offsetLeft值之和。
{
  var coord = {x: 0, y: 0};
  while (element)
  {
    coord.x += element.offsetLeft;
    coord.y += element.offsetTop;
    element = element.offsetParent;
  }
  return coord;
}
</script>
</body>
</html>

offsetLeft/Top Bug in Firefox

CSSASS » Javascript

获取元素尺寸和位置的两个冷门方法

mouseenter/mouseleave事件和delegate方法的实现

瀑布流布局及扩展——格子块的智能堆砌

Typing…

Google电吉他扩展版——可智能识别曲谱

offsetLeft/Top Bug in Firefox

我是谁

模拟引力环境下的运动轨迹

google suggestion效果的键盘鼠标事件

offsetX/Y for Firefox