js实现简单的碰壁反弹效果
更新时间:2016年08月30日 08:42:23 作者:骑猪敲代码
这篇文章主要为大家详细介绍了js实现简单的碰壁反弹效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例可以使用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两个变量是判断运动的方向。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
javascript设计模式 – 观察者模式原理与用法实例分析
这篇文章主要介绍了javascript设计模式 – 观察者模式,结合实例形式分析了javascript观察者模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下2020-04-04javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
密码强度是一个很普遍的功能,比较简单,主要是怎么制定这个强度规则。2010-05-05javascript完整操作Table的增加行,删除行的列子大全
非常漂亮的js操作table行代码函数。比较方便2008-10-10
最新评论