<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrap{
width: 1000px;
height: 400px;
border: 1px solid black;
position: relative;
}
.ball{
width: 50px;
height: 50px;
/*background-color: red;*/
position: absolute;
top: 0;
left: 0;
}
img{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="ball"><img src="img/6.png"/></div>
</div>
<script type="text/javascript">
//获取两个div
var oWrap = document.querySelector(".wrap");
var oBall = document.querySelector(".ball");
//offsetWidth 可见宽度
//clientWidth 元素宽度 不包含边框，但包含padding
//可以运动的范围
var maxWidth = oWrap.clientWidth - oBall.offsetWidth;
var maxHeight = oWrap.clientHeight - oBall.offsetHeight;
timer = null;
clearInterval(timer);
var speedX = 5;
var speedY = 1;
timer = setInterval(function(){
if (oBall.offsetTop >= maxHeight || oBall.offsetTop < 0) {
speedY = speedY*-1;
}
if (oBall.offsetLeft >= maxWidth || oBall.offsetLeft < 0) {
speedX = speedX*-1;
}
//Math.abs是取绝对值的意思
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>
186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
