抛物线运动1

时间：2015-04-27 11:18:53 阅读：105 评论：0 收藏：0 [点我收藏+]

标签：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{width:100px;height:100px;background:red;position: absolute;left:0;top:30px;}
</style>
<script type="text/javascript">
window.onload=function()
{
var oDiv=document.getElementById("box");
var btn=document.getElementById("btn");

var timer=null;
var speed=0;
var iSpeedX=10;
btn.onclick=function()
{
startMove();
};

function startMove()
{
clearInterval(timer);
timer=setInterval(function()
{

speed+=3;
var T=oDiv.offsetTop+speed;
if(T>document.documentElement.clientHeight-oDiv.offsetHeight)//节点接触到浏览器底部或超过的时候
{
T=document.documentElement.clientHeight-oDiv.offsetHeight;//回到接触浏览器底部的状态
speed*=-1;//速度取反
speed*=0.75;//给Y轴运动添加重力
iSpeedX*=0.75;//给x轴运动添加摩擦力
}
oDiv.style.top=T+"px";
oDiv.style.left=oDiv.offsetLeft+iSpeedX+"px";//左边距离不断增加
},30)
}
}
</script>
</head>
<body>
<button id="btn">点击</button>
<div id="box"></div>
</body>
</html>

抛物线运动1

标签：

原文地址：http://blog.csdn.net/xiaomogg/article/details/45306961

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行