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

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. ireport 无法打开问题

    打开时闪退 ,是因为jdk版本过高的原因:https://blog.csdn.net/aust_glj/article/details/52291240 相关软件下载地址: JasperReports ...

  2. SDOI2019 R2退役记

    还是退役了呀 Day -1 早上loli发了套题结果啥都不会 之后胡爷爷就秒了道数据结构 不过也没什么人做,于是全机房都在愉快的划水 下午来机房打了场luogu的\(rated\)赛,还是啥都不会 之 ...

  3. 解决git push至远程仓库失败的问题

    产生问题的原因: 远程仓库存在本地不存在的文件, 一个常见的例子是创建repository时勾选了README.md, 但此时本地还没有这个文件, 就会导致本地文件无法同步到远程仓库的问题. 解决方法 ...

  4. 解决微信浏览器内video全屏问题

    前端离职,让我写个视频播放页面,木办法只有我来搞了. 默认用h5的 video标签 测试时候发现微信浏览器内访问video自动全屏播放. 搜了下 webkit-playsinline="tr ...

  5. 一个班六个人，学号语文、数学、英语，接收成绩（不接受学号），输出学号成绩，总分、平均分，按总分排序（原生JS）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 【DM642学习笔记六】TI参考文档--DM642 Video Port Mini Driver

     这个文档介绍了在DM642EVM板上视频采集和显示微驱动的使用和设计.用EDMA进行存储器和视频端口的数据传输.为了增强代码的复用性和简化设计过程,驱动分为通用视频端口层和特定编解码芯片微驱动层两个 ...

  7. idea短信验证

    idea短信验证(短信接口:阿里云:消息中间件:activeMQ) 主要分为两步:1.创建发消息  2.创建收消息 1.创建发消息 1.1 创建maven工程 1.2 pom.xml文件导入依赖 注意 ...

  8. PHP1.9--数组

    1.array_slice()函数作用是在数组中根据条件取出一段值并返回,如果数组有字符串键,所返回的数组将保留健名 array array_slice(array array ,int offset ...

  9. loj6046 「雅礼集训 2017 Day8」爷

    https://loj.ac/problem/6046 最近遇到几个分块题,我发现我一遇到分块题就死活构造不出来 不对,明明是,遇到数据结构题,就死活构造不出来. 所以我就找了几个分块题做做. 其实分 ...

  10. TZ_06_SpringMVC_传统文件上传和SpringMVC文件上传方式

    1.传统文件上传方式 <!-- 文件上传需要的jar --> <dependency> <groupId>commons-fileupload</groupI ...