js模拟小球重力回弹效果

.cont{
width: 1000px;
height: 600px;
background: #eee;
margin: 20px auto;
position: relative;
}
.box{width: 100px;height: 100px;background: red;position: absolute;left: 0;border-radius: 50%;}

// 目标1: 让小球从上面落下来
// 准备:获取节点,绑定事件
var contObj = document.querySelector(’.cont’);
var boxObj = document.querySelector(’.box’);
document.onclick =()=>{
// 1 设置每次增加值的步长
var speed = 10;
// 2 重力加速的值
var g=2;
// 3 获取最大的top值,(下落最大高度)
// 用cont的高度减去box的高度
var target = contObj.offsetHeight - boxObj.offsetHeight;
// 4 设置定时器,让小球的top值,累加speed
var times = setInterval(()=>{
speed+=g;
// 5 判断小球是否下落到最大高度,是则停止下落
//
if((boxObj.offsetTop+speed)>target){
// console.log(target)
// console.log(boxObj.offsetTop);
// console.log(speed)
//目标:实现回弹,top值减小
//6 将speed的值,设置为负的
// 每次回弹让speed的值,进行损耗
speed = -parseInt(speed*0.8);
// console.log(speed+‘a’)
// 当speed的值,等于0时或者小于1时,就停止
if(Math.abs(speed)<1){
clearInterval(times);
}
// 给top直接设立终点值
boxObj.style.top = target+‘px’;
}else{
// console.log(speed+‘b’)
// 设置小球的top值
boxObj.style.top = boxObj.offsetTop+speed+‘px’;
}
},30);
}

js模拟小球重力回弹效果相关推荐

html小球碰撞源代码,JS实现小球的弹性碰撞效果
一.HTML代码(body部分) 上面body部分这样就算是完成了,下面我们给body中的div做一些小样式. 二.CSS小球样式部分 /*将body默认的margin和padding部分去掉*/ * ...
php气泡效果,js 模拟气泡屏保效果代码_其他特效
核心代码: var T$ = function(id) { return document.getElementById(id); } var $extend = function(des, src) ...
js模拟html5的maxLength效果
版本一网上找的 promiseNum('#contnet', 10);function promiseNum(id, num) {$(id).bind("input propertycha ...
js重力球效果代码实例
分享一段代码实例,它利用js实现了重力球效果. 本例子中,用鼠标向下拖动小球,然后松开即可查看演示. 代码实例如下: 001 002 003 004 005 006 007 008 009 010 0 ...
JS实现css的hover效果，兼容移动端
Hi I'm Shendi JS实现css的hover效果,兼容移动端功能概述 CSS的hover即触碰时触发,在电脑端鼠标触碰,移动端手指触摸有的时候光靠css实现不了一些效果,例如元素触发ho ...
模仿小球落下的重力回弹（自由落体）
一.使用html+css将需要的小球,地面写入页面. 二.使用js实现小球竖直方向的重力回弹运动加速效果:增加重力值,随着定时器的执行,重力增大回弹效果:当抵达目标位置时,将速度改为负值回弹减速 ...
Flash 与物理笔记：简单的小球重力模拟
物理是一个很有趣的东西,flash 结合物理是其中一个很重要的方向,也是学习flash技术一个很重要的门.最近翻阅一些资料,复习了一下物理和flash技术,虽然是一点皮毛的东西,不过先把他记录下来.为 ...
重力回弹（小球自由落体）
加速效果:增加重力值,随着定时器的执行,重力增大回弹效果:当抵达目标位置时,将速度改为负值回弹减速:将速度改变为负值的同时,乘以一个小数减少其速度效果图: html样式实现: <style ...
JS模拟模式窗口效果
<html> <head> <meta http-equiv="Content-Type" content="text/html; ...

js模拟小球重力回弹效果

js模拟小球重力回弹效果相关推荐

最新文章

热门文章