jQuery에서 가장자리에서 튀어오르는 애니메이션 효과를 얻는 방법은 무엇입니까?

이 글은 가장자리에서 튀어오르는 애니메이션을 구현하기 위해 jQuery를 주로 소개합니다. 매우 훌륭하고 참고할 가치가 있습니다. 필요한 친구는 참고할 수 있습니다.

먼저 렌더링은

약간 게으르다. 발은 실제로 매우 부드럽다.

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

이것은 단순한 효과일 뿐이므로 여러 가지 질문이 발생할 수 있습니다.

1) 여러 블록이 나타나면 페이지가 정지되나요?

2) 여러 블록이 충돌한 후 모션의 위치를 ​​변경하려면 어떻게 해야 하나요?

3) 블록의 초기 위치는 랜덤할 수 있나요?

4) 여러 블록의 속도를 다르게 설정하는 방법은 무엇인가요?

5) 블록 터뜨리기 미니 게임을 만들 수 있나요?

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

Es6의 Generator 기능에 대한 자세한 분석

Ajax로 다른 페이지를 요청할 때 WeChat JSSDK에 문제가 있나요?

Node 타이머 지식의 상세한 해석

위 내용은 jQuery에서 가장자리에서 튀어오르는 애니메이션 효과를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!