Wie kann in jQuery der Animationseffekt erzielt werden, der vom Rand abprallt?

In diesem Artikel wird hauptsächlich jQuery vorgestellt, um die Animation des Abprallens von der Kante zu realisieren. Es ist sehr gut und hat Referenzwert.

Erstens das Rendering:

Die Aufnahme klingt etwas verzögert, ist aber eigentlich recht flüssig.

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

Dies ist nur ein einfacher Effekt, der mehrere Probleme verursachen kann:

1) Wenn es mehrere gibt Wird die Seite einfrieren, wenn das Quadrat erscheint?

2) Wenn Sie die Bewegungsposition nach der Kollision mehrerer Blöcke ändern möchten, wie machen Sie das?

3) Kann die Anfangsposition der Blöcke zufällig sein?

4) Wie stelle ich die Geschwindigkeit mehrerer Blöcke unterschiedlich ein?

5) Kann man ein Minispiel aus hüpfenden Blöcken erstellen?

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detaillierte Analyse der Generatorfunktion in Es6

WeChat JSSDK erscheint in Ajax-Anfragen für verschiedene Seiten Fragen?

Detaillierte Interpretation des Node-Timer-Wissens

Das obige ist der detaillierte Inhalt vonWie kann in jQuery der Animationseffekt erzielt werden, der vom Rand abprallt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!