JS垂直落体回弹原理
2024-09-03 19:40:50
/*
*JS垂直落体回弹原理
*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1{ width:100px; height:100px; position:absolute; background:red;}
</style> <script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById("btn");
oBtn.onclick = function (){
startMove("div1",15);
}
function startMove(id,n1){
var oDiv = document.getElementById(id);
var iSpeed = 0;
setInterval(function (){
iSpeed +=n1;
var t = oDiv.offsetTop + iSpeed;
document.title = t + " , " + iSpeed;
console.log(iSpeed);
if(t > document.documentElement.clientHeight - oDiv.offsetHeight){
t = document.documentElement.clientHeight - oDiv.offsetHeight;
iSpeed *= -1;
iSpeed *=0.75;
}
oDiv.style.top = t + "px";
},30);
}
}
</script> </head> <body> <input type="button" value="运动" id="btn" />
<div id="div1"></div> </body>
</html>
最新文章
- 「标准」的 JS风格
- Lucene 工作原理 之倒排索引
- P4基函数
- C# Activex开发、打包、签名、发布
- iOS之UIview动画
- vijosP1159 岳麓山上打水
- wince下GetManifestResourceStream得到的Stream是null的解决
- jquery mobile Checkbox动态添加刷新及事件绑定
- Unity3D 中材质球(Material)预制体打包成AB(AssetBundle)出现材质丢失问题的解决方案
- 在eclispe的类中快速打出main方法
- 3167: [Heoi2013]Sao [树形DP]
- BP神经网络(原理及MATLAB实现)
- vue 之iview
- js之获取元素最终css属性
- python3 re.compile中含有变量
- 【PAT】B1077 互评成绩计算(20 分)
- webpack config
- linux命令返回值的妙用
- 14款超时尚的HTML5时钟动画
- BZOJ3668:[NOI2014]起床困难综合症——题解