HTML5+CSS3+JavaScript实现触碰边界自动反向运动的小球 HTML5+CSS3+JavaScript实现触碰边界自动反向运动的小球 .wp { width: 600px; height: 300px; position: relative; border: 1px solid black; } .box { position: absolute; width: 50px; height: 50px; background-color: rgb(216, 21, 21); border-radius: 50%; left: 0px; top: 0px; transition: all 0.1s; } //横速度 var width_speed = 10; //纵速度 var height_speed = 10; //绑定小球和外边盒子对象 var out = document.getElementById("out"); var box = document.getElementById("box"); //外边盒子宽高 var out_width = out.clientWidth; var out_height = out.clientHeight; console.log(out_width); console.log(out_height); //小球当前位置 var cache_width = box.offsetLeft; var cache_height = box.offsetTop; //定时器动画 var timer = setInterval(function () { cache_width += width_speed; cache_height += height_speed; //如果触碰到边界，速度乘以-1，反向运动 if (cache_width >= out_width - box.offsetWidth || cache_width = out_height - box.offsetHeight || cache_height