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

ttx9n · 发表于 2010-1-22 08:49:23

这其实是一个很简单的实现，create一个新的div元素，然后append到文档的body上，经过一定时间的延迟，做自由落体运动，着地后fade消失。不多说，直接上代码。你可以试着按下鼠标左键，然后拖拽出一个方块后释放，看效果

<!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=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> 
</head> 
<body> 
<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); 
}

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

pwseqn1h · 发表于 2022-9-13 15:02:50

老衲笑纳了

平平安安 · 发表于 2022-10-8 00:59:27

66666666666

回复用户5 · 发表于 2022-10-22 05:23:57

先把创新班才能下班才能下班

64000928 · 发表于 2023-3-16 02:38:56

dfdsafdsfdsfdsf

81708585 · 发表于 2023-5-30 14:37:36

这个源码不错啊

lsc54 · 发表于 2023-6-19 23:58:35

源码源码源码源码源码源码源码源码源码源码源码源码源码

x20yd3qx · 发表于 2023-8-6 23:26:03

借款金额看了就立刻

e8hwl6prw · 发表于 2023-9-1 02:12:22

而快乐你们快乐马年快乐

jasonlong · 发表于 2023-11-12 23:12:30

哈哈哈哈哈哈

账号		自动登录	找回密码
密码			立即注册

[JavaScript] javascript 实现自由落体的方块效果

相关帖子