<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>碰壁反弹</title>
<style>
*{
margin:0;
padding:0;
}
/*#outer{
width: 500px;
height: 500px;
margin:100px auto;
border:1px solid red;
position: relative;
}*/
#inner{
width: 50px;
height: 50px;
background-color:pink;
border:25px solid green;
position: absolute;
left:100px;
top:50px;
/*margin:50px 0 0 100px;*/
}
</style>
</head>
<body>
<!-- <div id="outer"> -->
<div id="inner"></div>
<!-- </div> -->
<script>
// var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
//获取浏览器窗口
var winWidth = document.documentElement.clientWidth;
var winHeight = document.documentElement.clientHeight;
//监听浏览器窗口变化
window.onresize = function(){
//console.log(1);
//当浏览器窗口尺寸发生变化时,重新获取浏览器窗口宽高并赋值给相对应的变量(刷新变量的值)
winWidth = document.documentElement.clientWidth;
winHeight = document.documentElement.clientHeight;
maxY = winHeight - inner.offsetHeight;
maxX = winWidth - inner.offsetWidth;
}
// var x = inner.offsetLeft;
// 设置Y方向的最大临界值
var maxY = winHeight - inner.offsetHeight;
// 设置X方向的最大临界值
var maxX = winWidth - inner.offsetWidth;
var speedY = 2;
var speedX = 2;
var x ,y;
// console.log(inner.offsetLeft);
function move(){
x = inner.offsetLeft + speedX;
y = inner.offsetTop + speedY;
// console.log(inner.style.left);
if(y >= maxY){
y = maxY;//防止超出
speedY *= -1;
}
if(y <= 0){
y = 0;
speedY *= -1;
}
if(x >= maxX){
// console.log(x);
x = maxX;
speedX *= -1;
}
if(x <= 0){
x = 0;
speedX *= -1;
}
inner.style.left = x + 'px';
inner.style.top = y + 'px';
}
var time = setInterval(move,16);
</script>
</body>
</html>
JS实现碰壁反弹
最新推荐文章于 2021-06-29 00:04:23 发布