Js模拟重力场Js动效
Posted 师兄白泽
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Js模拟重力场Js动效相关的知识，希望对你有一定的参考价值。
Js模拟重力场【Js动效】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模拟重力场</title>
<style>
/*小球的样式*/
.swapper
width: 100px;
height: 100px;
position: absolute;
background: #008c8c;
border-radius: 50%;
</style>
</head>
<body>
<!--小球-->
<div class="swapper">
</div>
<script>
// 获取div
var oDiv = document.getElementsByClassName('swapper')[0];
// 定时器
var timer = null;
// js为div添加点击事件
oDiv.onclick = function()
console.log("inter click");
startMove(this);
// js动画
function startMove(dom)
clearInterval(dom.timer);
// 模拟x轴运动速度
var iSpeedx = 6;
// 模拟y轴运动速度
var iSpeedy = 8;
// 模拟重力加速度
var g = 3
// 设置定时器
dom.timer = setInterval(function()
// v = v0 + at; 速度逐渐增加
iSpeedy += g;
// 顶部和底部的 speed
var newTop = dom.offsetTop + iSpeedy;
var newLeft = dom.offsetLeft + iSpeedx;
// 如果当前的y值位置 >= 文档高度 - dom高度（判断小球是否超出文档）
if(newTop >= document.documentElement.clientHeight - dom.clientHeight)
// speedy 方向改变
iSpeedy *= -1;
// speedy 与 speedx 速度减少
iSpeedy *= 0.8;
iSpeedx *= 0.8;
newTop= document.documentElement.clientHeight - dom.clientHeight;
if(newTop <= 0)
iSpeedy *= -1;
iSpeedy *= 0.8;
iSpeedx *= 0.8;
newTop = 0;
if(newLeft >= document.documentElement.clientWidth - dom.clientWidth)
iSpeedx *= -1;
iSpeedy *= 0.8;
iSpeedx *= 0.8;
newLeft= document.documentElement.clientWidth - dom.clientWidth;
if(newLeft <= 0)
iSpeedx *= -1;
iSpeedy *= 0.8;
iSpeedx *= 0.8;
newLeft = 0;
// 最终停止条件
if(Math.abs(iSpeedx) < 1)
iSpeedx = 0;
if(Math.abs(iSpeedy) < 1)
iSpeedy = 0;
if(iSpeedy == 0 && iSpeedx == 0)
// 清除定时器
clearInterval(dom.timer);
console.log("timer clear all");
// 改变样式
dom.style.top = newTop + 'px';
dom.style.left = newLeft + 'px';
,30);
console.log("timer end");
</script>
</body>
</html>
以上是关于Js模拟重力场Js动效的主要内容，如果未能解决你的问题，请参考以下文章