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

来源：豪特汽车网

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

<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> 
 
=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需刷新才能执行]

显示全文

全部频道

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