实现一些简单的物业自由落体需要理解：

clientHeight：浏览器客户机的整体高度

offsetHeight：物（实例div）高低

offsetTop：从对象client最顶层的距离

简单demo例如以下：

<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>free_movement</title>

	<style type="text/css">

		#div1{

			position: absolute;

			height: 100px;

			width: 100px;

			background: red;

		}

	</style>

	<script type="text/javascript">

		window.onload=function  () {

			var btn=document.getElementById('btn');

			var div1=document.getElementById('div1');

			var Time=null;

			var speed=0;

			btn.onclick=function () {

				startMove();

			}

			function startMove () {

				clearInterval(Time);

				Time=setInterval(function(){

					speed+= 3;

					var T = div1.offsetTop + speed;

					if(T > document.documentElement.clientHeight - div1.offsetHeight){

						T = document.documentElement.clientHeight - div1.offsetHeight;

						speed *= -1;

						speed *= 0.75;

					}

					div1.style.top=T+'px';

				}, 30)

			}

		}

	</script>

</head>

<body>

	<input type='button' value='開始运动' id="btn">

	<div id="div1"></div>

</body>

</html>

注：clearTnterval(Time)://防止多个点击事件

版权声明：本文博主原创文章。博客，未经同意不得转载。

javascript---在自由落体实现的更多相关文章

  1. JavaScript模拟自由落体

    1.效果图 2.实现分析 利用Canvas画圆球.地面: 1.下落过程 物理知识回顾,物体下落过程(不计损耗)由重力势能转换成动能 重力势能 Ep = mgh 动能  Ek = (1/2)mv^2 速 ...

  2. Javascript摸拟自由落体与上抛运动 说明!

    JavaScript 代码 //**************************************** //名称:Javascript摸拟自由落体与上抛运动! //作者:Gloot //邮箱 ...

  3. js实现自由落体

    实现自由落体运动需要理解的几个简单属性: clientHeight:浏览器客户端整体高度 offsetHeight:对象(比如div)的高度 offsetTop:对象离客户端最顶端的距离 <!d ...

  4. 使用CSS3动画模拟实现小球自由落体效果

    使用纯CSS代码模拟实现小球自由落体效果: html代码如下: <div id="ballDiv"> <div id="ball">&l ...

  5. Android游戏开发：物理游戏之重力系统开发--圆形自由落体Demo

    本节为大家提供有关物理游戏的知识,讲解了一个简单的圆形自由落体Demo的编写.. Java代码 package com.himi; import java.util.Random; import ja ...

  6. OpenGL绘制自由落体小球

    OpenGL绘制自由落体小球 一.    程序运行的软硬件环境 本次设计在window10系统下进行,运用C++进行编写,在CodeBlocks环境下使用OpenGL进行设计. 所需环境配置分为2部分 ...

  7. canvas动画:自由落体运动

    经过前面的文章,我们已经能够在canvas画布上画出各种炫酷的图形和画面,但是这些画面都是禁止的,怎么样才能让他们动起来呢? 如何绘制基本图形可以参考:canvas基本图形绘制 如何对基本图形移动旋转 ...

  8. 洛谷——P1033 自由落体

    P1033 自由落体 题目描述 在高为 H 的天花板上有 n 个小球,体积不计,位置分别为 0,1,2,…．n-1.在地面上有一个小车(长为 L,高为 K,距原点距离为 S1).已知小球下落距离计算公 ...

  9. 洛谷P1033 自由落体

    P1033 自由落体 题目描述 在高为 H 的天花板上有 n 个小球,体积不计,位置分别为 0,1,2,…．n-1.在地面上有一个小车(长为 L,高为 K,距原点距离为 S1).已知小球下落距离计算公 ...

随机推荐

  1. cocos2dX 事件之触摸事件和触摸事件集合

    今天, 我们来学习cocos2dX里面的触摸事件与触摸事件合集, 如今的手机游戏交互基本上都是通过触摸交互的, 所以大家明确这节的重要性了吧, 本节篇幅比較大, 所以我就不扯闲话了 先来看看经常使用函 ...

  2. 详谈隐藏Tabbar的几种方法

    如今正在写的一个项目,涉及到了使用两个TabBar,然后我须要显示当中一个的时候,然后隐藏另外一个,可是中间却出现故障了.我查了一些资料,想总结一下关于TabBar的隐藏. 第一种方法是: //隐藏t ...

  3. Mybatis+Struts2的结合:实现用户插入和查找

    总结一下今天一个成功的小实验:Mybatis+Struts2的结合:实现用户插入和查找.删除和修改如果以后写了,会继续更新. 一 准备工作. 1.新建一个java web项目. 2.在webConte ...

  4. C语言中scanf/fscanf 的%[]和%n说明符的使用方法

    标准输入输出函数%[]和%n说明符的使用方法     scanf fscanf,均从第一个非空格的可显示字符开始读起!         标准输入输出函数scanf具有相对较多的转换说明符,它常常作为入 ...

  5. ORACLE—005：创建JOB（二）

    假设须要创建带參数的job,怎样创建呢. 我们直接将參数声明.并赋值.然后传给job调用的存储过程就可以. 比如.存储过程名为Pro_Test_JOB,參数共同拥有一个.是VARCHAR2类型. 创建 ...

  6. PVPlayer的实现方式

    关于opencore下多媒体播放,在mediaserver进程里面仅仅有一行代码: MediaPlayerService::instantiate(); 这行代码的作用是初始化一个MediaPlaye ...

  7. Android登陆界面实现-支持输入框清楚和震动效果功能

    演示效果 主要代码例如以下 自己定义的一个EditText.用于实现有文字的时候显示能够清楚的button: import android.content.Context; import androi ...

  8. hdu2063+hdu1083（最大匹配数）

    传送门:hdu2063过山车 #include <cstdio> #include <cstring> #include <string> #include < ...

  9. android 防止多次点击,它会导致事件侦听响应于其他接口

    这里有情况: A当点击跳转至B介面,点击B接口结束后,到A界面中 1.此时在B界面中,设置点击事件,点击后结束B v.setOnClickListener(new OnClickListener() ...

  10. 30第二建筑Github Page

    从我原来博客的前端传输.链接:http://www.hacke2.cn/create-github-page/ 假设中国每一个程序猿都写博客,那么中国IT届的春天就来了 有同学问我的站点是怎么创建的, ...