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

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

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

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

  1.  <!doctype html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>free_movement</title>
  6.      <style type="text/css">
  7.          #div1{
  8.              position: absolute;
  9.              height: 100px;
  10.              width: 100px;
  11.              background: red;
  12.          }
  13.      </style>
  14.      <script type="text/javascript">
  15.          window.onload=function  () {
  16.              var btn=document.getElementById('btn');
  17.              var div1=document.getElementById('div1');  
  18.  
  19.              var Time=null;
  20.              var speed=0;
  21.              btn.onclick=function () {
  22.                  startMove();
  23.              }  
  24.  
  25.              function startMove () {
  26.                  clearInterval(Time);   //clearTnterval(Time)://防止多次点击事件的产生
  27.                  Time=setInterval(function(){
  28.                      speed+= 3;
  29.                      var T = div1.offsetTop + speed;
  30.                      if(T > document.documentElement.clientHeight - div1.offsetHeight){
  31.                          T = document.documentElement.clientHeight - div1.offsetHeight;
  32.                          speed *= -1;
  33.                          speed *= 0.75;
  34.                      }
  35.                      div1.style.top=T+'px';
  36.                  }, 30)
  37.              }
  38.          }
  39.      </script>
  40.  </head>
  41.  <body>
  42.      <input type='button' value='开始运动' id="btn">
  43.      <div id="div1"></div>
  44.  </body>
  45.  </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. tab切换 -- vue

    效果: html: // 按钮<div class="orderTab clearfix" @click="toggle()"> <div c ...

  2. java浮点运算的陷阱

    首先呢,i你要明白double和float. Inifinity: 例如:syso(5.0/0.0+" 和"+0.0 /0.0); 浮点运算的0.0不是真正意义上的0,而是非常接近 ...

  3. 【CF932E】Team Work

    题目 luogu的Romtejudge挂了我就当我过了吧 求 \[\sum_{i=1}^n\binom{n}{i}i^k\] 其实是个思博套路题,但是我现在这个水平还是刷刷板子吧 处理\(x^k\)是 ...

  4. Solr+HBase

  5. pg_hba.conf配置文件

    实例级别的权限由pg_hba.conf来控制,例如 : # TYPE DATABASE USER ADDRESS METHOD # "local" is for Unix doma ...

  6. org.apache.ibatis.executor.ExecutorException: No constructor found in xxxClass matching [java.lang.String, java.lang.Long, java.lang.String, java.lang.String, java.sql.Timestamp]

    解决方案 为bean加上默认构造方法 public class User { private String username; private long id; private String sex; ...

  7. Jmeter环境搭建及目录介绍

    Jmeter环境搭建及目录介绍 运行环境:jmeter是基于java语言的,所有需要准备Java的JDK环境,并添加到环境变量中. 一.环境搭建及配置 1.JMeter的下载: 官网:http://j ...

  8. 前端算法题：找出数组中第k大的数字出现多少次

    题目:给定一个一维数组,如[1,2,4,4,3,5],找出数组中第k大的数字出现多少次. 例如:第2大的数是4,出现2次,最后输出 4,2 function getNum(arr, k){ // 数组 ...

  9. JasperReport编译报表设计5

    我们在前面的章节中产生的JasperReport模板(JRXML文件).这个文件不能直接用于生成报告.它必须被编译成JasperReport的“本地二进制"格式,称为Jasperfile.在 ...

  10. win10上的vs2015项目到win7的2015无法使用