文章地址 https://www.cnblogs.com/sandraryan/
需求: 写一个div,让div在父级进行匀速运动,碰到父级上下左右的边框,就向反方向运动。
碰壁反弹在游戏制作中很常用~~~~
<style> .wrap { width: 1000px;height: 500px; border: 1px solid red; margin: 40px auto; position: relative; box-sizing: border-box; } .box { width: 100px;height: 100px; background-color: green; position: absolute; top: 100px;left: 200px; /* border: 1px solid red; */
/* 因为父元素有border,所以,可以给子元素也加一个边框,更好的解决方式是给父元素加box-sizing: border-box;总之就是算的时候宽高符合就行了*/ } </style>
<body> <div class="wrap"> <div class="box"></div> </div> <script> // 获取元素 var wrap = document.getElementsByTagName("div")[0]; var box = document.getElementsByTagName("div")[1]; //让元素动起来 // 添加两个变量,用于更换运动方向 var a = 1; var b = 1; // 获取元素的可运动空间,用父元素的宽高减去子元素的宽高 var w = wrap.offsetWidth - box.offsetWidth; var h = wrap.offsetHeight - box.offsetHeight; // console.log(w,h); setInterval(function(){ // 获取元素当前left var l = box.offsetLeft; if(l == w || l == 0){ // 如果到达可运动空间最大值和最小值的时候,a 变成负值 a *= -1; } // 把元素距离左边的值每10ms加1px // a变成负值可以改变运动方向 box.style.left = l + a + "px"; // 垂直方向同水平方向 var t = box.offsetTop; if(t == h || t == 0){ b *= -1; } box.style.top = t + b + "px"; },10); </script> </body>