javascript---在自由落体实现
实现一些简单的物业自由落体需要理解:
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---在自由落体实现的更多相关文章
- JavaScript模拟自由落体
1.效果图 2.实现分析 利用Canvas画圆球.地面: 1.下落过程 物理知识回顾,物体下落过程(不计损耗)由重力势能转换成动能 重力势能 Ep = mgh 动能 Ek = (1/2)mv^2 速 ...
- Javascript摸拟自由落体与上抛运动 说明!
JavaScript 代码 //**************************************** //名称:Javascript摸拟自由落体与上抛运动! //作者:Gloot //邮箱 ...
- js实现自由落体
实现自由落体运动需要理解的几个简单属性: clientHeight:浏览器客户端整体高度 offsetHeight:对象(比如div)的高度 offsetTop:对象离客户端最顶端的距离 <!d ...
- 使用CSS3动画模拟实现小球自由落体效果
使用纯CSS代码模拟实现小球自由落体效果: html代码如下: <div id="ballDiv"> <div id="ball">&l ...
- Android游戏开发:物理游戏之重力系统开发--圆形自由落体Demo
本节为大家提供有关物理游戏的知识,讲解了一个简单的圆形自由落体Demo的编写.. Java代码 package com.himi; import java.util.Random; import ja ...
- OpenGL绘制自由落体小球
OpenGL绘制自由落体小球 一. 程序运行的软硬件环境 本次设计在window10系统下进行,运用C++进行编写,在CodeBlocks环境下使用OpenGL进行设计. 所需环境配置分为2部分 ...
- canvas动画:自由落体运动
经过前面的文章,我们已经能够在canvas画布上画出各种炫酷的图形和画面,但是这些画面都是禁止的,怎么样才能让他们动起来呢? 如何绘制基本图形可以参考:canvas基本图形绘制 如何对基本图形移动旋转 ...
- 洛谷——P1033 自由落体
P1033 自由落体 题目描述 在高为 H 的天花板上有 n 个小球,体积不计,位置分别为 0,1,2,….n-1.在地面上有一个小车(长为 L,高为 K,距原点距离为 S1).已知小球下落距离计算公 ...
- 洛谷P1033 自由落体
P1033 自由落体 题目描述 在高为 H 的天花板上有 n 个小球,体积不计,位置分别为 0,1,2,….n-1.在地面上有一个小车(长为 L,高为 K,距原点距离为 S1).已知小球下落距离计算公 ...
随机推荐
- PHP中抽象类与接口的应用场景
<?php /*** ====笔记部分==== 接口的具体语法: 0:以人类为, class Human 是人的草图 而接口 是零件 可以用多种零件组合出一种新特种来. 1: 如上,接口本身即是 ...
- 计算VMT的长度
function GetVirtualMethodCount(AClass: TClass): Integer; begin Result := (PInteger(Integer(AClass) + ...
- Java编码浅析(注意区分三个概念)(转)
编码: (1)外部资源的字符集-----没有读入jvm中的数据都是外部资源 (2)jvm中数据的字符集-----都是unicode (1)和(2)之间发生交互时,如果不指定编码,则使用JVM平台默认字 ...
- 关于JAVA Project.waitfor()返回值是1
Project.waitfor()返回值是1,找了很久从网上没有发现关于1的说明. 这时对源代码调试了一下,发现Project=null.而去根目录下点击被调用的bat文件发现也可以被正确执行. 这时 ...
- Java程序猿面试题集(181- 199)
Java面试题集(181-199) 摘要:这部分是包括了Java高级玩法的一些专题,对面试者和新入职的Java程序猿相信都会有帮助的. 181. 182. 183. 184. 185. 186. 1 ...
- 实现ios常见菜单效果的思路
眼下见过的实现边側菜单的效果.比較流行的有下面三种:(效果图) 1.菜单条覆盖在部分主视图上 附上实现该效果的一个不错的源代码地址: http://code4app.com/ios/RNFrosted ...
- Patch to solve sqlite3_int64 error when building Python 2.7.3 on RHEL/CentOS
Patch to solve sqlite3_int64 error when building Python 2.7.3 on RHEL/CentOS Patch to solve sqlite3_ ...
- 一张图总结Google C++编程规范(Google C++ Style Guide)
Google C++ Style Guide是一份不错的C++编码指南,我制作了一张比較全面的说明图,能够在短时间内高速掌握规范的重点内容.只是规范毕竟是人定的,记得活学活用.看图前别忘了阅读以下三条 ...
- 该项目的建设maven片:4.协调和依赖,spring依赖注入demo
源码下载 协调 <groupId>com.demo.animal</groupId> <artifactId>animal-core</artifactId& ...
- PHP 报告分拣和生产理念
原则排序报告 见一宝.一只猫的排序,我想照猫画虎,鼓捣自己一个. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3VqaWFuZ3dlaTU2Nw==/f ...