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

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. XMPP入门

    本人原创,很多其它xmpp知识.ios知识.其它分享知识见:我的个人博客 简单介绍: 1.XMPP是可扩展消息与存在协议,主要用于im. 2.他是一种类似于http协议的传输数据协议.过程如:&quo ...

  2. ASP.NET Aries 开发框架

    开源:ASP.NET Aries 开发框架 前言: 随着岁月的推进,不知不觉已在.NET这领域上战斗了十年了. 青春还没来得急好好感受,却已是步入健忘之秋的老人一枚了. 趁着还有点记忆,得赶紧把硬盘里 ...

  3. thinkphp 3.2.3 入门示例

    原文:thinkphp3.2 1.安装WAMPServer,到D:\wamp\. 2.下载ThinkPHP3.2.3核心版.解压缩后,放到D:\wamp\www\MyWeb\.打开浏览器,输入网址:h ...

  4. [Android学习笔记]Canvas的使用

    Canvas文档 http://developer.android.com/training/index.html 在绘制view时候,重写onDraw(canvas)方法,可能需要在canvas上绘 ...

  5. 14.4.2 Configuring InnoDB for Read-Only Operation 配置InnoDB 永于只读操作:

    14.4.2 Configuring InnoDB for Read-Only Operation 配置InnoDB 永于只读操作: 你可以查询InnoDB 表 MySQL 数据目录是在只读介质里,通 ...

  6. 关于window.history.back()后退问题

    Windows下的window.history.back()后退后返回的不仅仅是前一个页而是前一个页的状态.假设一个页我改动了3次那必须后退3次才干回到前一个页.并且数据库中删除的数据依旧显示在上面感 ...

  7. iOS中的字符串NSString

    创建一个字符串对象: NSstring * str1 = @"hello world"; NSString * str = [[NSString alloc]initWithStr ...

  8. Android开发者必须深入学习的10个应用开源项目

    Android 开发又将带来新一轮热潮,很多开发者都投入到这个浪潮中去了,创造了许许多多相当优秀的应用.其中也有许许多多的开发者提供了应用开源项 目,贡献出他们的智慧和创造力.学习开源代码是掌握技术的 ...

  9. FZU2181+poj2942（点双连通+判奇圈）

    分析:我们对于那些相互不憎恨的人连边,将每次参加会议的所有人(不一定是全部人,只需人数>=3且为奇数)看做一个点双联通分量,那么每个点都至少有两个点与他相邻.即需要保证双联通分量中存在奇圈.至于 ...

  10. 通过Camera进行拍照

    Android通过Camera来控制拍照,使用Camera比较简单,按步骤进行即可: 下面用一个示例来演示: Activity: package com.home.activity; import j ...