How to create an animation effect with jQuery that bounces when it hits the edge of the frame

This time I will bring you jQueryHow to create an animation effect that bounces when it hits the edge of the frame, and make jQuery hit What are the precautions for the animation effect that can bounce off the edge of the frame? The following is a practical case, let’s take a look.

First the renderings:

The recording seems to be a bit laggy, but in fact it is 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)
})

I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to implement the toggle method in jQuery

How to implement jQuery+JSONP across domains

How to use the select component in jquery

How to achieve the jquery carriage return login effect

The above is the detailed content of How to create an animation effect with jQuery that bounces when it hits the edge of the frame. For more information, please follow other related articles on the PHP Chinese website!