主页 / 网络编程 /

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

网络编程 2021-07-04 20:00www.168986.cn编程入门
这篇文章主要为大家详细介绍了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;
  : 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.=y+'px';
    }else{
      y--;
      if (y<=0) {
       movey=1;
      }boll.style.=y+'px';
     }
   },1)
 </script>
</body>
</html>

其中movex和movey两个变量是判断运动的方向。

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

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

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by