写了一个让猪猪很蛋疼的效果

百般无聊的情况下写的，效果的思路来源于猪猪给的一个地址http://www.scmylike.com/wishingtree/index.html?ran=1293530304018，这是他们的一个项目，有兴趣的话可以去玩玩，写的过程中遇到一些问题，感谢果果的指正，以及檬爸桑帮我找出因为少写一个字母带来的让人蛋疼困绕。

JS:

function danteng(){this.init.apply(this,arguments)};
danteng.prototype = {
	init:function(opts){
		var set = {
			outer:'test',
			width:800,
			height:400,
			oClass:'haha',
			len:20
		}
		opts = opts || {};
		var opt = this.extend(set,opts);
		var box = document.getElementById(opt.outer);
		this.maxZIndex = opt.len;
		for(var i=0,len=opt.len;i<len;i++){
			var oDiv = document.createElement('div');
			var index = this.getRandomZindex(opt.len);
			oDiv.className = opt.oClass;
			box.appendChild(oDiv);
			oDiv.style.zIndex = index;
			oDiv.innerHTML = i;
			var width = oDiv.offsetWidth,height = oDiv.offsetHeight;
			var pos = this.getRandomPos(opt.width-width,opt.height-height);
			this.skyAnimate(oDiv,{'top':pos.y,'left':pos.x},'slow',function(){});
			this.drag(oDiv,opt.width,opt.height)
		}
	},
	extend:function(baseObj,extendObj){
		for(var i in extendObj) baseObj[i] = extendObj[i];
		return baseObj;
	},
	getRandomZindex:function(zIndex){
		return Math.round(Math.random()*zIndex);
	},
	getRandomPos:function(left,top){
		return {
			x:Math.round(Math.random()*left),
			y:Math.round(Math.random()*top)
		};
	},
	getPos:function(e){
		e = e || window.event;
		if(e.pageX || e.pageY) return {x:e.pageX,y:e.pageY};
		return {
			x:e.clientX + document.documentElement.scrollLeft - document.body.clientLeft,
			y:e.clientY + document.documentElement.scrollTop - document.body.clientTop
		};
	},
	addEvent:function(el,type,fn){
		if(el.addEventListener != undefined){
			el.addEventListener(type,fn,false);
		}else if(el.attachEvent != undefined){
			el.attachEvent('on'+type,fn)
		}else{
			el['on'+type] = fn;
		}
	},
	removeEvent:function(el,type,fn){
		if(el.removeEventListener != undefined){
			el.removeEventListener(type,fn,false);
		}else if(el.detachEvent != undefined){
			el.detachEvent('on'+type,fn);
		}else{
			el['on'+type] = function(){};
		}
	},
	drag:function(el,range_width,range_height){
		this.addEvent(el,'mousedown',this.down(el,range_width,range_height));
		el.ondragstart = function(){return false;};
	},
	down:function(el,range_width,range_height){
		var _this = this;
		return function(e){
			var width = range_width - el.offsetWidth;
			var left = range_height - el.offsetHeight;
			var pos = _this.getPos(e);
			var l = parseInt(el.style.left);
			var t = parseInt(el.style.top);
			el.style.zIndex = ++_this.maxZIndex;
			_this.tmp_move = _this.move(el,l,t,width,left,pos);
			_this.tmp_up = _this.up(el);
			_this.addEvent(document,'mousemove',_this.tmp_move);
			_this.addEvent(document,'mouseup',_this.tmp_up);
		}
	},
	move:function(el,l,t,width,left,pos){
		var _this = this;
		return function(e){
			var newPos = _this.getPos(e);
			var oL = l + newPos.x - pos.x;
			var oT = t + newPos.y - pos.y;
			el.style.left = Math.max(0,Math.min(oL,width)) + 'px';
			el.style.top = Math.max(0,Math.min(oT,left)) + 'px';
		}
	},
	up:function(el){
		var _this = this;
		return function(){
			_this.removeEvent(document,'mousemove',_this.tmp_move);
		}
	},
	skyAnimate:function(obj, options, step, callback){
		if (!obj) return;
		var n = 0,timer = null,oStyle = [],de = [],c = [], b = 0;
		step = { 'slow': 100,'normal': 64, 'fast': 10 } [step] || 64;
		var d = function(x) {
			return Math.sqrt(1 - Math.pow((x - 1), 2))
		}
		for (var i in options) {
			var obj_style = parseInt(this.sky_css(obj, i));
			if (!obj_style) obj_style = 0;
			de.push(obj_style);
			c.push(options[i] - obj_style);
			oStyle.push(i);
		}
		timer = setInterval(function() {
			if (n >= step) {
				clearInterval(timer);
				if (callback && callback instanceof Function) callback();
			}
			b = d(n / step);
			for (var j = 0,len = de.length; j < len; j++) {
				obj.style[oStyle[j]] = de[j] + c[j] * b + 'px';
			}
			n++;
		},15);
	},
	sky_getType:function(o){
		 var t;
		return ((t = typeof(o)) == 'object' ? o == null && 'null' || (Object.prototype.toString.call(o)).slice(8, -1) : t).toLowerCase();
	},
	sky_css:function(o, name){
		if (this.sky_getType(name) == 'string') {
			if (o.style[name]) return o.style[name];
			if (o.currentStyle) return o.currentStyle[name];
			if (document.defaultView) return document.defaultView.getComputedStyle(o, "")[name];
		} else if (this.sky_getType(name) == 'object') {
			for (var i in name) {
				o.style[i] = name[i];
			}
		}
	}
}

new danteng();

HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	#test { width:800px; height:400px; border:1px solid #000; margin:100px auto; position:relative; background:#333;}
	.haha { background:#000; border:2px solid #fff; width:200px; height:100px; position:absolute;top:50%; left:50%; cursor:move; color:#fff; font-size:30px; line-height:100px; text-align:center;}
</style>
</head>

<body>
<div id="test"></div>
<script type="text/javascript" src="danteng.js"></script>
</body>
</html>