原生js实现一个DIV的碰撞反弹运动：
关键在于DIV的边界检测，进而改变运动方向，即可实现碰撞反弹效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;} div{height:100px;width:100px;background:red;position:absolute;} /*添加绝对定位*/ </style> <script> window.onload=function(){ var btn=document.getElementById("btn"); var div=document.getElementById("div"); var speedx=6; var speedy=8; var t=null; btn.onclick=function(){ clearInterval(t); t=setInterval(function(){ var l=div.offsetLeft+speedx; var t=div.offsetTop+speedy; if(l>=document.documentElement.clientWidth-div.offsetWidth){ speedx*=-1; l=document.documentElement.clientWidth-div.offsetWidth; }else if(l<=0){ speedx*=-1; l=0; } if(t>=document.documentElement.clientHeight-div.offsetHeight){ speedy*=-1; t=document.documentElement.clientHeight-div.offsetHeight; }else if(t<=0){ speedy*=-1; t=0; } div.style.left=l+"px"; div.style.top=t+"px"; },10); } } </script> </head> <body> <input type="button" id="btn" value="开始运动"> <div id="div"></div> </body> </html>
内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
