您的位置：首页 > Web前端 > JavaScript

碰撞

2016-07-12 08:33 501 查看

<!DOCTYPE html>
<html>
<head>
<meta
charset="UTF-8">
<title></title>
<style
type="text/css">
.wrap{
width:
1000px;
height:
400px;
border:
1px solid deeppink;
position:
relative;
}
.ball{
width:
50px;
height:
50px;
background-color: red;
position:
absolute;
top:
0;
left:
0;
}
</style>
</head>
<body>
<div
class="wrap">
<div
class="ball"></div>
</div>
<script
type="text/javascript">
// 获取两个div
var
oWrap = document.querySelector(".wrap");
var
oBall = document.querySelector(".ball");
// clientWidth 元素宽度,不包含边框，但包含padding
// 可以运动的范围
var
maxWidth = oWrap.clientWidth -
oBall.offsetWidth;
var
maxHeight = oWrap.clientHeight -
oBall.offsetHeight;
var
timer = null;
clearInterval(timer);
var
speedX = 2;
var
speedY = 5;
timer =
setInterval(function(){
if
(oBall.offsetTop >= maxHeight ||
oBall.offsetTop < 0) {
speedY
*= -1;
}
if
(oBall.offsetLeft >= maxWidth ||
oBall.offsetLeft < 0) {
speedX
*= -1;
}
if
(Math.abs(maxHeight - oBall.offsetHeight)
< speedY) {
oBall.style.Top
= maxHeight + 'px';
}
oBall.style.left
= oBall.offsetLeft + speedX
+ 'px';
oBall.style.top
= oBall.offsetTop + speedY
+ 'px';
},20);

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 碰撞 js 小例子

相关文章推荐

新的分享

章节导航