Comment créer un effet d'animation avec jQuery qui rebondit lorsqu'il atteint le bord du cadre

Cette fois, je vais vous montrer comment créer un effet animation qui rebondit lorsqu'il touche le bord du cadre avec jQuery, et créer une collision jQuery Quelles sont les précautions pour l'effet d'animation qui peut rebondir sur le bord du cadre Voici un cas pratique, jetons un oeil.

Tout d'abord, les rendus :

L'enregistrement est un peu lent, mais en fait il est assez fluide.

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)
})

Je crois que vous avez lu le cas dans cet article Vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment implémenter la méthode toggle dans jQuery

Comment implémenter jQuery+JSONP inter-domaines

Comment utiliser le composant select dans jquery

Comment obtenir l'effet de connexion de retour chariot jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!