资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
javascript 实现自由落体的方块效果
你可以试着按下鼠标左键，然后拖拽出一个方块后释放，看效果
<!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> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%3C!--%20%0D%0Afunction%20Draw(event)%7B%20%0D%0Athis.mouseDownEvent%20%3D%20event%7C%7Cwindow.event%3B%20%0D%0Athis.node%20%3D%20null%3B%20%0D%0Athis.pointX%20%3D%20null%3B%20%0D%0Athis.pointY%20%3D%20null%3B%20%0D%0Athis.dropCount%20%3D%200%3B%20%0D%0Athis.dropId%20%3D%20null%3B%20%0D%0Athis.fadeCount%20%3D%200%3B%20%0D%0Athis.fadeId%20%3D%20null%3B%20%0D%0A%7D%20%0D%0A%0D%0ADraw.prototype.colors%20%3D%20%5B%22%23CCFF99%22%2C%22%23FF9966%22%2C%22%23CC0000%22%2C%22%2300FF00%22%2C%22%23330000%22%2C%22%2300CC00%22%2C%22%23339900%22%2C%22%23660066%22%2C%22%23CC66FF%22%2C%22%23FF00FF%22%2C%22%23CC0000%22%2C%22%23993300%22%2C%22%23006600%22%2C%22%233300FF%22%2C%22%230000CC%22%2C%22%23663300%22%2C%22%2366CCFF%22%2C%22%2333FF66%22%2C%22%23669900%22%5D%3B%20%0D%0A%0D%0ADraw.prototype.randomColor%20%3D%20function()%7B%20%0D%0Areturn%20this.colors%5BMath.floor(Math.random()*this.colors.length)%5D%3B%20%0D%0A%7D%20%0D%0A%0D%0ADraw.prototype.createDiv%20%3D%20function()%7B%20%0D%0Avar%20e%20%3D%20this.mouseDownEvent%3B%20%0D%0Avar%20div%20%3D%20document.createElement(%22div%22)%3B%20%0D%0Adiv.className%3D%22container%22%3B%20%0D%0Adiv.style.top%20%3D%20e.clientY%20%2B%20%22px%22%3B%20%0D%0Adiv.style.left%20%3D%20e.clientX%20%2B%20%22px%22%3B%20%0D%0Adiv.style.backgroundColor%20%3D%20this.randomColor()%3B%20%0D%0Adocument.body.appendChild(div)%3B%20%0D%0Athis.node%20%3D%20div%3B%20%0D%0Athis.pointX%20%3D%20e.clientX%3B%20%0D%0Athis.pointY%20%3D%20e.clientY%3B%20%0D%0A%7D%20%0D%0A%0D%0ADraw.prototype.resizeDiv%20%3D%20function(e)%7B%20%0D%0Ae%20%3D%20e%20%7C%7C%20window.event%3B%20%0D%0Avar%20self%20%3D%20this%3B%20%0D%0Aself.node.style.width%20%3D%20Math.abs(e.clientX-self.pointX)%2B%22px%22%3B%20%0D%0Aself.node.style.height%20%3D%20Math.abs(e.clientY-self.pointY)%2B%22px%22%3B%20%0D%0Aself.node.style.left%20%3D%20Math.min(self.pointX%2C%20e.clientX)%2B%22px%22%3B%20%0D%0Aself.node.style.top%20%3D%20Math.min(self.pointY%2C%20e.clientY)%2B%22px%22%3B%20%0D%0A%7D%20%0D%0A%0D%0ADraw.prototype.drop%20%3D%20function()%7B%20%0D%0Avar%20self%20%3D%20this%3B%20%0D%0Aself.dropId%20%3D%20window.setInterval(function()%7B%20%0D%0Avar%20dc%20%3D%20document.documentElement.clientHeight%3B%20%0D%0Avar%20dh%20%3D%20self.node.offsetHeight%3B%20%0D%0Avar%20dt%20%3D%20self.node.offsetTop%3B%20%0D%0Aif(dt%3E%3Ddc-dh)%7BclearInterval(self.dropId)%3Bself.fade()%3B%7D%20%0D%0Aself.node.style.top%20%3D%20Math.min(dt%2B(%2B%2Bself.dropCount*2-1)*5%2C%20dc-dh)%2B%22px%22%3B%20%0D%0A%7D%2C50)%3B%20%0D%0A%7D%20%0D%0A%0D%0ADraw.prototype.fade%20%3D%20function()%7B%20%0D%0Avar%20self%20%3D%20this%3B%20%0D%0Aself.node.style.backgroundColor%20%3D%20self.randomColor()%3B%20%0D%0Aself.node.style.filter%20%3D%20%22alpha(opacity%3D100)%22%3B%20%0D%0Aself.node.style.opacity%20%3D%201%3B%20%0D%0Aself.fadeId%20%3D%20window.setInterval(function()%7B%20%0D%0Aif(%2B%2Bself.fadeCount%3E100)%7BclearInterval(self.fadeId)%3B%7D%20%0D%0Aself.node.style.filter%20%3D%20%22alpha(opacity%3D%22%2B(100-self.fadeCount)%2B%22)%22%3B%20%0D%0Aself.node.style.opacity%20%3D%20(100-self.fadeCount)%2F100%3B%20%0D%0A%7D%2C10)%3B%20%0D%0A%7D%20%0D%0A%0D%0Adocument.onmousedown%20%3D%20function(event)%7B%20%0D%0Avar%20drawObject%20%3D%20new%20Draw(event)%3B%20%0D%0AdrawObject.createDiv()%3B%20%0D%0Adocument.onmousemove%20%3D%20function(event)%7B%20%0D%0AdrawObject.resizeDiv(event)%3B%20%0D%0A%7D%20%0D%0Adocument.onmouseup%20%3D%20function()%7B%20%0D%0Adocument.onmousemove%20%3D%20null%3B%20%0D%0Awindow.setTimeout(function()%7BdrawObject.drop()%7D%2C%201000)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2F--%3E%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程