How to achieve the animation effect of bouncing off the edge in jQuery?

This article mainly introduces the jQuery implementation of the animation that bounces off the edge. It is very good and has reference value. Friends in need can refer to it

First, the renderings:

The recording sounds a little laggy, but it’s actually quite smooth.

1.HTML:

<p class="box"></p>

2.CSS:

body{
   background:skyblue  
}
.box{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background: white;
}

3.JS:

$(function(){
  var obj=$(".box");
  var x=obj.offset().left;//盒子距离左部的位置
  var y=obj.offset().top;//盒子距离顶部的位置
  var objwid=obj.width();//盒子的宽
  var objhei=obj.height();
  var winwid=$(window).width();//页面的宽
  var winhei=$(window).height();
  var max=10;//设置最大视觉差，就是感觉这个距离刚好碰到
  var winx=winwid-objwid-max;//盒子x轴最远达到的距离
  var winy=winhei-objhei-max;//盒子y轴最远达到的距离
  var sx=0;//x轴是否返回的状态，0是值++即正向移动，1是值--即返回
  var sy=0;
  time1=setInterval(function(){
    if(sx==0){
      obj.css("left",x++);
    }else if(sx==1){
      obj.css("left",x--);
    }
    if(x<=0){
      sx=0;
    }else if(x>=winx){
      sx=1;
    }
    if(sy==0){
      obj.css("top",y++);
    }else if(sy==1){
      obj.css("top",y--);
    }
    if(y<=0){
      sy=0;
    }else if(y>=winy){
      sy=1;
    }
  },1)
})

This is just a simple effect, which can cause multiple problems:

1) If there are multiple When the square appears, will the page freeze?

2) If you want to change the position of motion after multiple blocks collide, how to do this?

3) Can the initial position of the block be random?

4) How to set the speed of multiple blocks to be different?

5) Can you make a mini game of popping blocks?

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed analysis of the Generator function in Es6

WeChat JSSDK appears in ajax request for different pages some questions?

Detailed interpretation of Node timer knowledge

##

The above is the detailed content of How to achieve the animation effect of bouncing off the edge in jQuery?. For more information, please follow other related articles on the PHP Chinese website!