自由落体的方块
这其实是一个很简单的实现，create一个新的div元素，然后append到文档的body上，经过一定时间的延迟，做自由落体运动，着地后fade消失。
不多说，直接上代码。
你可以试着打开功能，然后按下鼠标左键，然后拖拽出一个方块后释放，看效果
代码如下:
代码
1 <style><!--
2 div.container{
3 position:absolute;
4 border:1px solid #333;
5 font-size:0px;
6 filter: alpha(opacity=60);
7 opacity: 0.6;
8 }
9 body.unselected{
10 -moz-user-select: none;
11 -webkit-user-select: none;
12 }
13 --></style>
14 <script type="text/javascript">// <![CDATA[
15 function Draw(event){
16 this.mouseDownEvent = event||window.event;
17 this.node = null;
18 this.pointX = null;
19 this.pointY = null;
20 this.dropCount = 0;
21 this.dropId = null;
22 this.fadeCount = 0;
23 this.fadeId = null;
24 }
25
26 Draw.prototype.colors = ["#CCFF99","#FF9966","#CC0000","#00FF00","#330000","#00CC00","#339900","#660066","#CC66FF","#FF00FF","#CC0000","#993300","#006600","#3300FF","#0000CC","#663300","#66CCFF","#33FF66","#669900"];
27
28 Draw.prototype.randomColor = function(){
29 return this.colors[Math.floor(Math.random()*this.colors.length)];
30 }
31
32 Draw.prototype.createDiv = function(){
33 var e = this.mouseDownEvent;
34 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
35 var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
36 var div = document.createElement("div");
37 div.className="container";
38 div.style.top = e.clientY + scrollTop + "px";
39 div.style.left = e.clientX +or: #000000;"> scrollLeft + "px";
40 div.style.backgroundColor = this.randomColor();
41 document.body.appendChild(div);
42 this.node = div;
43 this.pointX = e.clientX + scrollLeft;
44 this.pointY = e.clientY + scrollTop;
45 }
46
47 Draw.prototype.resizeDiv = function(e){
48 e = e || window.event;
49 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
50 var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
51 var self = this;
52 self.node.style.width = Math.abs(e.clientX + scrollLeft -self.pointX)+"px";
53 self.node.style.height = Math.abs(e.clientY + scrollTop -self.pointY)+"px";
54 self.node.style.left = Math.min(self.pointX, e.clientX + scrollLeft)+"px";
55 self.node.style.top = Math.min(self.pointY, e.clientY + scrollTop)+"px";
56 }
57
58 Draw.prototype.drop = function(){
59 var self = this;
60 self.dropId = window.setInterval(function(){
61 var dc = document.documentElement.clientHeight + document.documentElement.scrollTop||document.body.scrollTop;
62 var dh = self.node.offsetHeight;
63 var dt = self.node.offsetTop;
64 if(dt>=dc-dh){clearInterval(self.dropId);self.fade();}
65 self.node.style.top = Math.min(dt+(++self.dropCount*2-1)*5, dc-dh)+"px";
66 },50);
67 }
68
69 Draw.prototype.fade = function(){
70 var self = this;
71 self.node.style.backgroundColor = self.randomColor();
72 self.node.style.filter = "alpha(opacity=100)";
73 self.node.style.opacity = 1;
74 self.fadeId = window.setInterval(function(){
75 if(++self.fadeCount>100){clearInterval(self.fadeId);}
76 self.node.style.filter = "alpha(opacity="+(100-self.fadeCount)+")";
77 self.node.style.opacity = (100-self.fadeCount)/100;
78 },10);
79 }
80
81 var DrawFn = function(event){
82 var drawObject = new Draw(event);
83 drawObject.createDiv();
84 document.onmousemove = function(event){
85 drawObject.resizeDiv(event);
86 }
87 document.onmouseup = function(){
88 document.onmousemove = null;
89 window.setTimeout(function(){drawObject.drop()}, 1000);
90 }
91 }
92 var controller = document.getElementById("controller");
93 var c_opened = false;
94 controller.onclick = function(){
95 c_opened = !c_opened;
96 if(c_opened){
97 document.body.unselectable = true;
98 document.body.className = "unselected";
99 controller.value= "关闭功能";
100 document.onmousedown = function(event){DrawFn(event)};
101 }else{
102 document.body.unselectable = false;
103 document.body.className = "";
104 controller.value= "打开功能";
105 document.onmousedown = null;
106 }
107 }
108 // ]]></script>
