JS实现碰壁反弹

来源：互联网发布：大淘客联盟和淘宝联盟编辑：程序博客网时间：2024/04/28 14:50

碰壁反弹

*{
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;/
}

<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>

0 0