jQuery는 웹 페이지에 벚꽃이 떨어지는 특수 효과를 위한 샘플 코드를 구현합니다.

이 글은 웹 페이지에 벚꽃이 떨어지는 특수 효과를 구현하기 위해 주로 jQuery를 소개합니다. 효과가 매우 좋습니다. 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

개발 이유

• 수업시간에 여자아이의 바탕화면에 벚꽃나무가 있는 것을 보고 바로 웹페이지에서 벚꽃을 날리게 하는 아이디어가 떠올라서 이 플러그인을 에 전용으로 사용하게 되었습니다. 저 여자 동창;

• 포커스 차트, 캐러셀 차트, 워터폴 플로우 등의 응용 플러그인을 개발해 봤는데 이런 플러그인은 처음이라 그냥 관심분야인 거죠. ?

개발도구

• Jquery+웹스톰, 별도 필요없음 어떤 환경이라도 구성하면 모바일 단말기는 사용할 수 없습니다

효과 시연

더 눈에 띄도록 배경을 검은색으로 변경하고, gif 이미지가 좀 느린데 실제 효과는 비교적 부드럽습니다

효과에 대한 자세한 내용은 Github를 참조하세요

사용 방법

• 효과를 추가해야 하는 페이지에 html 코드를 추가하는 것이 가장 좋습니다. body 요소 아래 첫 번째 태그에 배치하려면

<p class="cherry">
<img id="yinghua" src="../image/yinghua.png" alt="" >
</p>

• 필요에 따라 변수를 변경할 수 있는 js 코드를 가져옵니다.

$(function(){
   $('.cherry').Cherry_Blossoms({
     is_Cherry:true,//是否生成樱花
     image_min:10,//花瓣最小宽度和高度
     image_max:50,//花瓣最大宽度和高度
     time_min:10000,//花瓣最快下坠时间
     time_max:20000,//花瓣最慢下坠时间
     interval:500//花瓣生成时间间隔
   })
 })

js 플러그인

• IIFE(익명 함수의 즉시 실행 )

• $.extend(), 확장 플러그인은 기본 매개변수를 정의합니다.

• randomNum()은 [m,n] 유형 난수를 설정합니다.

관련 권장 사항:

JavaScript는 개인화된 탐색 모음을 구현합니다. 특수 효과

H5를 사용하여 불꽃놀이 입자 특수 효과를 만드는 방법

css 물결 버튼 특수 효과

위 내용은 jQuery는 웹 페이지에 벚꽃이 떨어지는 특수 효과를 위한 샘플 코드를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!