javascript 实现自由落体的方块效果
作者:bea
你可以试着按下鼠标左键,然后拖拽出一个方块后释放,看效果 <!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
你可以试着按下鼠标左键,然后拖拽出一个方块后释放,看效果
<!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);
}
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>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
<!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);
}
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>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- jQuery 1.4 15个你应该知道的新特性(译)
- 优化javascript的执行速度
- window.onbeforeunload方法在IE下无法正常工作的解决办法
- JQuery 1.4 中的Ajax问题
- 用JS写的一个TableView控件代码
- JQuery 操作Javascript对象和数组的工具函数小结
- JavaScript 学习笔记(十四) 正则表达式
- JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
- JQuery 构建客户/服务分离的链接模型中Table中的排序分析
- JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
- 被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
- jQuery 入门级学习笔记及源码
- JQuery 确定css方框模型(盒模型Box Model)
- Jquery实战_读书笔记2 选择器
- Jquery实战_读书笔记1—选择jQuery
- jquery last-child 列表最后一项的样式
- javascript 拖放效果实现代码
- JAVASCRIPT style 中visibility和display之间的区别
- javascript 获取url参数和script标签中获取url参数函数代码