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

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

Simple xhtml page

div.container{
position:absolute;
border:1px solid #333;
font-size:0px;
filter: alpha(opacity=60);
opacity: 0.6;
}

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

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

赞 (0)

相关推荐

  • jQuery+canvas实现的球体平抛及颜色动态变换效果

    jQuery+canvas实现的球体平抛及颜色动态变换效果

    本文实例讲述了jQuery+canvas实现的球体平抛及颜色动态变换效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!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.

  • javascript实现10个球随机运动、碰撞实例详解

    本文实例讲述了javascript实现10个球随机运动.碰撞的方法.分享给大家供大家参考.具体如下: 学了一段时间的javascript了,做过一些小案例,目前最有难度的就是10个小球随机碰撞效果,这不,把它上上来与大家分享一下,相信不少和我一样的菜鸟在开始上手编程时都会有不少的困惑,希望它能给一些人带来帮助. 效果要求:10个小球在页面随机移动,碰到窗口边界或其他小球都会反弹 思路: 1.10个小球是10个div; 2.碰窗口反弹,定义vx vy为小球的移动变量,以及一个弹力变量bounce(

  • javascript弹性运动效果简单实现方法

    javascript弹性运动效果简单实现方法

    本文实例讲述了javascript弹性运动效果简单实现方法.分享给大家供大家参考,具体如下: 弹性运动实现原理:加速运动+减速运动+摩擦运动 运行效果截图如下: 实例代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ width:100px; height:100px

  • js+html5实现的自由落体运动效果代码

    js+html5实现的自由落体运动效果代码

    本文实例讲述了js+html5实现的自由落体运动效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!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/x

  • jQuery+canvas实现简单的球体斜抛及颜色动态变换效果

    jQuery+canvas实现简单的球体斜抛及颜色动态变换效果

    本文实例讲述了jQuery+canvas实现简单的球体斜抛及颜色动态变换效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w

  • JavaScript拖拽、碰撞、重力及弹性运动实例分析

    本文实例讲述了JavaScript拖拽.碰撞.重力及弹性运动实现方法.分享给大家供大家参考,具体如下: js拖拽.碰撞与重力实现代码: window.onload=function () { var oDiv=document.getElementById('div1'); var lastX=0; var lastY=0; oDiv.onmousedown=function (ev) { var oEvent=ev||event; var disX=oEvent.clientX-oDiv.of

  • javascript多物体运动实现方法分析

    javascript多物体运动实现方法分析

    本文实例讲述了javascript多物体运动实现方法.分享给大家供大家参考,具体如下: 这里需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用. 运行效果截图如下: 例子: <!doctype html> <html> <head> <meta charset="utf-8"> <title>多物体运动</title> <style> div{ width:100

  • JS运动相关知识点小结(附弹性运动示例)

    本文总结了JS运动相关知识点.分享给大家供大家参考,具体如下: 1.多物体运动框架所有东西都不能共用 2.document.title输出频率不能太高 3.在写JS时尽量避免写小数,因为计算机内部都是模拟的,而不是实际存储的 如:0.07*100 在JS运算里不是为7 var a=3; var b=3.00000000000000000001; alert(a=b); 输出的结果却是true 4.写程序思考时先思考一般,再思考特殊,写程序是,先排除特殊,然后写一般 if(特殊1) {} else

  • javascript匀速运动实现方法分析

    javascript匀速运动实现方法分析

    本文实例讲述了javascript匀速运动实现方法.分享给大家供大家参考,具体如下: 匀速运动步骤: 1. 清除定时器 2. 开启定时器 3. 运动是否完成:a.运动完成,清除定时器:b.运动未完成继续 匀速运动停止条件:距离足够近  Math.abs(当然距离-目标距离) < 最小运动距离 运行效果截图如下: div的匀速运动(简单运动)示例: <!doctype html> <html> <head> <meta charset="utf-8&

  • JavaScript运动减速效果实例分析

    JavaScript运动减速效果实例分析

    本文实例讲述了JavaScript运动减速效果.分享给大家供大家参考.具体如下: 这段代码可帮助利用JS从事游戏编程的朋友,它主要实现一种运行减速缓冲的效果,代码精简,很不错. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • JavaScript缓冲运动实现方法(2则示例)

    本文实例讲述了JavaScript缓冲运动实现方法.分享给大家供大家参考,具体如下: 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) 复制代码 代码如下: (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意:当计算出来的速度有小数时需要取整: 复制代码 代码如下: (500 - oDiv.offsetLeft) / 7 = iSpeed; iSpeed = iSpeed>0?Math.ceil(iSpeed):

随机推荐