js实现简单的碰壁反弹效果

(编辑：jimmy 日期: 2024/11/19 浏览：3 次 )

本文实例可以使用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两个变量是判断运动的方向。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：js制作网站首页图片轮播特效代码
下一篇：js控住DOM实现发布微博效果