javascript 实现自由落体的方块效果_javascript技巧

你可以试着按下鼠标左键，然后拖拽出一个方块后释放，看效果

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Simple xhtml page</title> <style> div.container{ position:absolute; border:1px solid #333; font-size:0px; filter: alpha(opacity=60); opacity: 0.6; } </style> <script type="text/javascript"> <!-- function Draw(event){ this.mouseDownEvent = event||window.event; this.node = null; this.pointX = null; this.pointY = null; this.dropCount = 0; this.dropId = null; this.fadeCount = 0; this.fadeId = null; } Draw.prototype.colors = ["#CCFF99","#FF9966","#CC0000","#00FF00","#330000","#00CC00","#339900","#660066","#CC66FF","#FF00FF","#CC0000","#993300","#006600","#3300FF","#0000CC","#663300","#66CCFF","#33FF66","#669900"]; Draw.prototype.randomColor = function(){ return this.colors[Math.floor(Math.random()*this.colors.length)]; } Draw.prototype.createDiv = function(){ var e = this.mouseDownEvent; var div = document.createElement("div"); div.className="container"; div.style.top = e.clientY + "px"; div.style.left = e.clientX + "px"; div.style.backgroundColor = this.randomColor(); document.body.appendChild(div); this.node = div; this.pointX = e.clientX; this.pointY = e.clientY; } Draw.prototype.resizeDiv = function(e){ e = e || window.event; var self = this; self.node.style.width = Math.abs(e.clientX-self.pointX)+"px"; self.node.style.height = Math.abs(e.clientY-self.pointY)+"px"; self.node.style.left = Math.min(self.pointX, e.clientX)+"px"; self.node.style.top = Math.min(self.pointY, e.clientY)+"px"; } Draw.prototype.drop = function(){ var self = this; self.dropId = window.setInterval(function(){ var dc = document.documentElement.clientHeight; var dh = self.node.offsetHeight; var dt = self.node.offsetTop; if(dt>=dc-dh){clearInterval(self.dropId);self.fade();} self.node.style.top = Math.min(dt+(++self.dropCount*2-1)*5, dc-dh)+"px"; },50); } Draw.prototype.fade = function(){ var self = this; self.node.style.backgroundColor = self.randomColor(); self.node.style.filter = "alpha(opacity=100)"; self.node.style.opacity = 1; self.fadeId = window.setInterval(function(){ if(++self.fadeCount>100){clearInterval(self.fadeId);} self.node.style.filter = "alpha(opacity="+(100-self.fadeCount)+")"; self.node.style.opacity = (100-self.fadeCount)/100; },10); } document.onmousedown = function(event){ var drawObject = new Draw(event); drawObject.createDiv(); document.onmousemove = function(event){ drawObject.resizeDiv(event); } document.onmouseup = function(){ document.onmousemove = null; window.setTimeout(function(){drawObject.drop()}, 1000); } } //--> </script>