프레임 가장자리에 닿으면 튀어오르는 jQuery를 사용하여 애니메이션 효과를 만드는 방법

이번에는 프레임 가장자리에 닿으면 튀어오르는 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)
})

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 다른 관련 기사를 주목하세요. PHP 중국어 웹사이트에서!

추천 자료:

jQuery에서 토글 메소드를 구현하는 방법

jQuery+JSONP 도메인 간 구현 효과

위 내용은 프레임 가장자리에 닿으면 튀어오르는 jQuery를 사용하여 애니메이션 효과를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!