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

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. Cesium官方教程9--粒子系统

    原文地址:https://cesiumjs.org/tutorials/Particle-Systems-Tutorial/ 粒子系统介绍 这篇教程带你学习Cesium的粒子相关API,比如如何在你的 ...

  2. springcloud(十)：Hystrix工作流程分析

    通过Netflix Hystrix官方公布的流程图,我们来了解一下Hystrix的工作流程 1.创建HystrixCommand对象或者HystrixObservableCommand对象 首先创建一 ...

  3. JAVA缓存的实现

    缓存可分为二大类: 一.通过文件缓存,顾名思义文件缓存是指把数据存储在磁盘上,不管你是以XML格式,序列化文件DAT格式还是其它文件格式: 二.内存缓存,也就是实现一个类中静态Map,对这个Map进行 ...

  4. Compile_Netgen_WITH_OpenCascade

    title: Compile_Netgen_WITH_OpenCascade date: 2016-04-23 21:14:42 tags: 结合OCCT编译Netgen date: 2016-04- ...

  5. iOS汇编系列-汇编入门

    概述 汇编语言(Assembly Language)用符号代替了0和1,比机器语言更便于阅读和记忆. 但是同样汇编语言同样指令太多不便于记忆,就出现了高级语言.C\C++\Java\Swift等,更接 ...

  6. SPRINGBOOT配置MYSQL,MYBATIS,DRUID

    配置 DRUID连接池 MYSQL数据库 MYBATIS持久层框架 添加依赖 <dependency> <groupId>mysql</groupId> <a ...

  7. Python学习之enumerate

         enumerate还可以接收第二个参数,用于指定索引起始值   2.     注意open返回文件对象,可迭代,而os.open返回的是文件指针,int类型, <wiz_tmp_tag ...

  8. LUOGU P1903 [国家集训队]数颜色 / 维护队列

    传送门 解题思路 带修莫队,第一次写,其实和普通莫队差不多,就是多了个时间轴,块分n^(2/3)最优,时间复杂度O(n^(5/3)). #include<iostream> #includ ...

  9. ArcGIS Server 10.1安装、配置、发布地图服务

    先跟大家分享一个esri的学习资料,http://pan.baidu.com/s/1nBzxB,<ArcGIS10.1 for Server 入门教程>.教程讲述的很清楚,下面说说我这次发 ...

  10. PHP获取网站中各文章的第一张图片的代码示例

    调取文章中的第一张图作为列表页缩略图是很流行的做法,WordPress中一般主题默认也是如此,那我们接下来就一起来看看PHP获取网站中各文章的第一张图片的代码示例 ? 1 2 3 4 5 6 7 8 ...