实现自由落体运动需要理解的几个简单属性：

clientHeight：浏览器客户端整体高度

offsetHeight：对象（比如div）的高度

offsetTop：对象离客户端最顶端的距离

 <!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);   //clearTnterval(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>

转自：

javascript---之自由落体运动实现

js实现自由落体的更多相关文章

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

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

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

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

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

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

  4. OpenGL绘制自由落体小球

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

  5. javascript---在自由落体实现

    实现一些简单的物业自由落体需要理解: clientHeight:浏览器客户机的整体高度 offsetHeight:物(实例div)高低 offsetTop:从对象client最顶层的距离 简单demo ...

  6. JavaScript模拟自由落体

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

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

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

  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. Linux的基本原则

    Linux的基本原则:1.由目的单一的小程序组成,一个程序只做一件事,且做好: 2.’组合小程序完成复杂任务: 3.一切皆文件: 4.尽量避免捕获用户接口: 5.配置文件保存为纯文本格式: 6.提供机 ...

  2. 6大主流开源SQL引擎总结，遥遥领先的是谁？

    根据 O’Reilly 2016年数据科学薪资调查显示,SQL 是数据科学领域使用最广泛的语言.大部分项目都需要一些SQL 操作,甚至有一些只需要SQL.本文就带你来了解这些主流的开源SQL引擎!背景 ...

  3. String类的endsWith()方法和startsWith()方法

    String 的endsWith() 方法用于测 试字符串是否以指定的后缀结束.如果参数表示的字符序列是此对象表示的字符序列的后缀,则返回 true:否则返回 false.注意,如果参数是空字符串,或 ...

  4. rabbit mq 基础流程（转）

    从AMQP协议可以看出,MessageQueue.Exchange和Binding构成了AMQP协议的核心,下面我们就围绕这三个主要组件    从应用使用的角度全面的介绍如何利用Rabbit MQ构建 ...

  5. <每日一题>题目23：桶排序

    ''' 桶排序:最快最简单的排序 缺点:最占内存 类型:分布式排序 ''' import cProfile import random def bucketSort(nums): #选出最大的数 ma ...

  6. JS写一个方法，传入一个数组，返回该数组的层深(维度)

    现在我们有一个多维数组,我们想得到该数组的层深,即最大维度 如:var arr = [1, [4,[5,6,[7]]], [2,3]] = 0:返回4:那么我们该怎么做呢? 核心思想:递归,循环遍历 ...

  7. elasticsearch 中文API 基于查询的删除(九)

    基于查询的删除API 基于查询的删除API允许开发者基于查询删除一个或者多个索引.一个或者多个类型.下面是一个例子. import static org.elasticsearch.index.que ...

  8. 为互联网业务而生：阿里云全球首发云Cassandra服务！

    引言:十年沉淀.全球宽表排名第一.阿里云首发云Cassandra服务 ApsaraDB for Cassandra是基于开源Apache Cassandra,融合阿里云数据库DBaaS能力的分布式No ...

  9. 【codeforces 505C】Mr.Kitayuta,the Treasure Hunter

    [题目链接]:http://codeforces.com/problemset/problem/505/C [题意] 一开始你跳一步长度为d; 之后你每步能跳d-1,d,d+1这3种步数; 然后在路上 ...

  10. Windows中使用CopyFile函数复制文件，出现string转LPCTSTR问题（附代码）

    原因: 同一张图片,用imread读取,imwrite重新写入另外一个文件夹,然后再次读取发现前后异常,这是因为读取后转成Mat格式,然后写入转成图片格式,这个过程会对图片产生损失. 因此后来采用直接 ...