js实现简单的碰壁反弹效果_javascript技巧_
2016-09-02 14:44:35
[小 大]
已经帮助：人解决问题
本文实例可以使用js来实现简单的碰壁反弹效果，具体的内容请大家参考代码部分。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>碰撞小球</title> <style> #box{ width: 1000px; height: 800px; position: relative; border:1px solid red; margin:50px auto 0; } #boll{ width: 50px; height: 50px;/* border-radius: 25px;*/ border:1px solid green; position: absolute; top: 66px; left: 88px; } </style></head><body> <div id="box"> <div id="boll"></div> </div> <script> var box=document.getElementById('box'); var boll=document.getElementById('boll'); var x=88,y=66,timer1=null,movex=1,movey=1; console.log(box.clientWidth-boll.clientWidth); console.log(box.clientWidth-boll.offsetWidth); timer1=setInterval(function(){ if (movex) {//判断方向 x++; if (x>=box.clientWidth-boll.clientWidth) { movex=0; }boll.style.left=x+'px';} else{ x--; if (x<=0) { movex=1; }boll.style.left=x+'px'; } if (movey) { y++; if (y>=box.clientHeight-boll.clientHeight) { movey=0; }boll.style.top=y+'px'; }else{ y--; if (y<=0) { movey=1; }boll.style.top=y+'px'; } },1) </script></body></html> 其中movex和movey两个变量是判断运动的方向。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
（责任编辑：）
