js实现简单的碰壁反弹效果
本文实例可以使用js来实现简单的碰壁反弹效果,具体的内容请大家参考代码部分。
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>碰撞小球</title> <style> #box{ width:1000px; height:800px; position:relative; border:1pxsolidred; margin:50pxauto0; } #boll{ width:50px; height:50px; /*border-radius:25px;*/ border:1pxsolidgreen; position:absolute; top:66px; left:88px; } </style> </head> <body> <divid="box"> <divid="boll"></div> </div> <script> varbox=document.getElementById('box'); varboll=document.getElementById('boll'); varx=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两个变量是判断运动的方向。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。