완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오.-JS 튜토리얼-php.cn

Peashooter, 잔디밭, 총알은 모두 기성 이미지입니다.

1. jQuery는 라이브러리인가요? 아니면 프레임워크인가요?

jQuery는 프레임워크라기보다 현재 가장 인기 있는 js 라이브러리라고 할 수 있습니다.

이전에 Zhihu에서 누군가가 다음과 같이 말하는 것을 봤습니다.

당신이 라이브러리를 호출합니다. Framework가 당신을 호출합니다.

그렇다고 생각합니다. 문자 그대로의 의미는 아마도 클래스 라이브러리가 제한 없이 사용할 수 있지만, 프레임워크는 다양한 제한 하에 사용해야 합니다.

저는 개인적으로 js 라이브러리가 문서 요소와 직접 상호 작용하는 API를 의미한다고 생각합니다. 라이브러리를 직접 참조하여 서비스할 수 있습니다. 프레임워크는 아키텍처 수준에 편향되어 있습니다. 프레임워크를 사용하려면 해당 규칙을 따라야 합니다. 예를 들어, angle.js는 DOM 문서 구조를 제한하는 동시에 메소드를 제공합니다.

Java의 세 가지 주요 프레임워크를 예로 들어보면 마찬가지입니다. Spring을 사용하려면 철근과 콘크리트가 완성된 것과 같습니다. 들어가서 꾸미기만 하면 됩니다. 라이브러리는 노출되는 인터페이스를 제외하고는 StringUtils와 다소 유사하며 다른 것은 신경 쓸 필요가 없으며 직접 호출하면 됩니다.

2. jQuery의 animate 기능

animate() 함수는 CSS 속성을 기반으로 사용자 정의 애니메이션을 실행하는 데 사용됩니다.

기본 사용법:

$(&#39;#id&#39;).animate(css,time,callback);

로그인 후 복사

css: 최종 구현에 필요한 스타일 목록

time: 전환 시간

callback: 콜백 함수

애니메이션 기능의 주요 기능은 일부 CSS 스타일 전환 효과를 얻는 것입니다.

3. jQuery 소개

예를 들어 이제 div 상자가 생겼습니다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <style type="text/css">
   #box {
    width: 300px;
    height: 300px;
    background:greenyellow;
   }
  </style>
 </head>
 <body>
  <div id=&#39;box&#39;></div>
 </body>
 
 <script>
 
 </script>
 
</html>

로그인 후 복사

위 코드에는 바이두에서 제공하는 jQuery 파일을 도입했습니다.

그럼 도입 성공 여부를 빠르게 판단하는 방법은 무엇일까요? 다음과 같은 메소드가 제공됩니다:

1.console.log($);

효과:

완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오.

이는 도입이 성공했음을 나타냅니다.

2. 브라우저를 직접 사용해 확인

페이지를 열고 F12를 누르면 이런 콘솔이 나옵니다(저는 구글을 사용하고 있습니다. 크롬).

완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오.

$입력

완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오.

입력!

완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오.

야 이거 괜찮아?

4. onmouseover 이벤트

div 상자에 마우스 오버 이벤트를 추가해 보겠습니다.

$(&#39;#box&#39;).on(&#39;mouseover&#39;,function(){
 alert();
});

로그인 후 복사

십자가:

완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오.

적어도 이것은 지금까지의 코드가 정확하다는 것을 보여줍니다. 마음에 들었습니다. 처음 js를 배웠을 때 코드의 모든 줄이 자신감 있게 작성되었다는 느낌을 받았습니다.

5. 애니메이션 기능을 사용하여 상자의 너비와 높이를 변경합니다.

경고를 제거하고 다음 코드를 추가합니다.

$(&#39;#box&#39;).on(&#39;mouseover&#39;,function(){
 $(&#39;#box&#39;).animate({width:600},500);
});

로그인 후 복사

이것은 즉, 마우스가 그릴 때 너비가 600px로 변경되고 전환 시간이 500밀리초라는 의미입니다.

완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오.

너비가 2배가 된 후 높이도 2배로 늘리고 싶다면 어떻게 해야 할까요?

그런데, 첫 번째 애니메이션이 완료되면 계속해서 다음 애니메이션을 실행하는 콜백 함수를 사용하세요.

$(&#39;#box&#39;).on(&#39;mouseover&#39;,function(){
 $(&#39;#box&#39;).animate({width:600},500,function(){
  $(&#39;#box&#39;).animate({height:600},500);
 });
});

로그인 후 복사

완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오.

그렇습니다. 순서.

본 글에서는 jQuery 애니메이트 기능의 사용법을 간략하게 소개합니다.

6. 부록

마지막으로 animate 함수 외에 js 타이머 setInterval 메서드도 사용됩니다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
  <style type="text/css">
   body {
    background: url(background1.jpg) no-repeat;
    position: fixed;
   }
   ul li {
    list-style: none;
   }
   .wrap {
    position: relative;
    left: 170px;
    top: 65px;
   }
   .plants1 {
    display: inline-block;
    position: relative;
    left:35px;
   }
   .plants1 .plant {
    position: relative;
    margin-bottom:20px;
   }
   .plants1 .plant .PB00 {
    position: absolute;
    top:-2px;
    left:15px;
   }
 
   .plants2 {
    display: inline-block;
    position: relative;
    left:2px;
   }
   .plants2 .plant {
    position: relative;
    margin-bottom:20px;
   }
   .plants2 .plant .PB00 {
    position: absolute;
    top:-2px;
    left:15px;
   }
 
   .plants3 {
    display: inline-block;
    position: relative;
    left:-40px;
   }
   .plants3 .plant {
    position: relative;
    margin-bottom:20px;
   }
   .plants3 .plant .PB00 {
    position: absolute;
    top:-2px;
    left:15px;
   }
  </style>
 </head>
 <body>
  <div class=&#39;wrap&#39;>
   <ul class=&#39;plants1&#39;>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
    </li>
 
   </ul>
 
   <ul class=&#39;plants2&#39;>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
    </li>
 
   </ul>
 
   <ul class=&#39;plants3&#39;>
 
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
    </li>
    <li class=&#39;plant&#39;>
     <img  class=&#39;Peashooter&#39; src="img/Peashooter.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
     <img  class=&#39;PB00&#39; src="img/PB00.gif" / alt="완두콩 발사 효과를 얻기 위해 jQuery의 애니메이션 기능 animate를 사용하십시오." >
    </li>
   </ul>
  </div>
 </body>
 
 <script type="text/javascript">
 
  function randomNum(num){
   return Math.floor(Math.random()*(num+1));
  };
 
  setInterval(function(){
   var $this = $(&#39;.PB00&#39;).eq(randomNum(17));
   $this.animate({&#39;margin-left&#39; : 1000},2000,function(){
    $this.css({&#39;margin-left&#39; : 0});
   });
  },10);
 
 </script> 
 
</html>

로그인 후 복사

요약

위 내용은 모두의 공부와 업무에 도움이 되길 바랍니다. 질문이 있으시면 메시지를 남겨서 소통하세요. PHP 중국어 웹사이트에 대한 귀하의 지원에 감사드립니다.

완두콩 발사 효과를 달성하기 위해 jQuery의 애니메이션 기능을 사용한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!