집 > 기사 > 웹 프론트엔드 > JQuery를 사용하여 눈송이를 내리는 방법

JQuery를 사용하여 눈송이를 내리는 방법

亚连원래의: 2018-06-23 14:56:111467검색

이 기사에서는 JS와 JQuery를 사용하여 떨어지는 눈송이의 애니메이션 효과를 얻는 방법을 주로 설명합니다.

많은 친구들이 특수 효과 웹 페이지를 만들 때 떨어지는 눈송이 효과를 사용해야 합니다. 여기서는 JS 및 JQuery 코드를 사용하여 이 효과를 얻는 방법을 정리했습니다.

먼저 구현해야 할 눈송이 효과를 살펴보겠습니다.

이번에 구현한 눈송이 떨어지는 효과는 매우 간단하며 주로 JavaScript에서 타이머, setTimeout 및 setInterval을 연습하는 것입니다.

Explanation

setTimeout()

setTimeout 함수는 함수나 특정 코드 조각이 실행된 후 밀리초 수를 지정하는 데 사용됩니다. 나중에 타이머를 취소하는 데 사용할 수 있는 타이머 번호를 나타내는 정수를 반환합니다.

var timerId = setTimeout(func|code, delay)

위 코드에서 setTimeout 함수는 두 개의 매개변수를 받습니다. 첫 번째 매개변수 func|code는 지연할 함수 이름 또는 코드 조각이고, 두 번째 매개변수 지연은 실행을 지연할 시간(밀리초)입니다.

setInterval()

setInterval 함수의 사용법은 setTimeout과 정확히 동일합니다. 유일한 차이점은 setInterval이 작업을 매번 실행해야 한다는 점입니다. 이는 예약된 실행 횟수에 제한이 없습니다.

clearTimeout(),clearInterval()

setTimeout 및 setInterval 함수는 모두 카운터 번호를 나타내는 정수 값을 반환합니다. 해당 정수를 ClearTimeout 및clearInterval 함수에 전달하여 해당 타이머를 취소합니다.

var id1 = setTimeout(f,1000);
var id2 = setInterval(f,1000);
clearTimeout(id1);
clearInterval(id2);

참고:

setTimeout 및 setInterval은 setTimeout에 지정된 작업이 실행되기 전에 현재 스크립트의 동기화 작업과 "작업 대기열"의 기존 이벤트가 모두 처리될 때까지 기다려야 합니다.

눈이 내리는 효과를 얻는 방법에 대해 계속 이야기해 봅시다

주요 단계는 다음 4단계입니다.

1. 눈송이 템플릿을 정의합니다.
2.
3. 첫 번째 타이머가 눈송이를 생성하여 페이지에 렌더링하면 눈송이가 움직이도록 스타일을 수정합니다. 장치에서 눈송이가 떨어지면 눈송이를 삭제하세요.

위는 구현 아이디어입니다. 다음 코드는 JS 네이티브 코드입니다. 마지막으로 아이디어는 동일합니다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      background-color: #000;
      /*防止出现向下滚动条*/
      overflow: hidden;
    }
  </style>
</head>

<body>
  <script>
    function snow() {
      //  1、定义一片雪花模板
      var flake = document.createElement(&#39;p&#39;);
      // 雪花字符 ❄❉❅❆✻✼❇❈❊✥✺
      flake.innerHTML = &#39;❆&#39;;
      flake.style.cssText = &#39;position:absolute;color:#fff;&#39;;

      //获取页面的高度 相当于雪花下落结束时Y轴的位置
      var documentHieght = window.innerHeight;
      //获取页面的宽度，利用这个数来算出，雪花开始时left的值
      var documentWidth = window.innerWidth;

      //定义生成一片雪花的毫秒数
      var millisec = 100;
      //2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；
      setInterval(function() { //页面加载之后，定时器就开始工作
        //随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置
        var startLeft = Math.random() * documentWidth;

        //随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置
        var endLeft = Math.random() * documentWidth;

        //随机生成雪花大小
        var flakeSize = 5 + 20 * Math.random();

        //随机生成雪花下落持续时间
        var durationTime = 4000 + 7000 * Math.random();

        //随机生成雪花下落 开始 时的透明度
        var startOpacity = 0.7 + 0.3 * Math.random();

        //随机生成雪花下落 结束 时的透明度
        var endOpacity = 0.2 + 0.2 * Math.random();

        //克隆一个雪花模板
        var cloneFlake = flake.cloneNode(true);

        //第一次修改样式，定义克隆出来的雪花的样式
        cloneFlake.style.cssText += `
            left: ${startLeft}px;
            opacity: ${startOpacity};
            font-size:${flakeSize}px;
            top:-25px;
               transition:${durationTime}ms;
           `;

        //拼接到页面中
        document.body.appendChild(cloneFlake);

        //设置第二个定时器，一次性定时器，
        //当第一个定时器生成雪花，并在页面上渲染出来后，修改雪花的样式，让雪花动起来；
        setTimeout(function() {
          //第二次修改样式
          cloneFlake.style.cssText += `
                left: ${endLeft}px;
                top:${documentHieght}px;
                opacity:${endOpacity};
              `;

          //4、设置第三个定时器，当雪花落下后，删除雪花。
          setTimeout(function() {
            cloneFlake.remove();
          }, durationTime);
        }, 0);

      }, millisec);
    }
    snow();
  </script>
</body>
</html>

참고:

타이머에 의해 추가된 이벤트는 다음 이벤트 루프에서 실행되기 때문에 두 번째 타이머의 기능은 생성된 눈송이를 페이지에 연결하여 먼저 렌더링한 다음 스타일만 수정하는 것입니다. 타이머가 없으면 브라우저는 페이지를 렌더링하기 전에 모든 JS 코드를 실행합니다. 이 경우 후속 스타일이 이전 스타일을 직접 덮어쓰며 눈송이는 이동할 수 없습니다. 이는 브라우저의 스레드와 관련이 있습니다.

간단히 말하면, 이 타이머를 사용하면 스타일을 두 번 수정하는 코드를 별도로 실행할 수 있다는 뜻입니다. 첫 번째 수정된 스타일을 먼저 렌더링한 다음 두 번째 수정을 하면 눈송이가 이동하게 됩니다.

JQuery 버전

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      background-color: #000;
      /*防止出现向下滚动条*/
      overflow: hidden;
    }
  </style>
</head>

<body>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
  <script>
    function snow() {
      //1、定义一片雪花模板
      var flake = $("<p>").css({
        "position": "absolute",
        "color": "#fff"
      }).html("❄");

      //获取页面的宽度，利用这个数来算出，雪花开始时left的值
      var documentWidth = $(document).width();

      //获取页面的高度 相当于雪花下落结束时Y轴的位置
      var documentHieght = $(document).height();

      //定义生成一片雪花的毫秒数
      var millisec = 100;
      //2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；
      setInterval(function() {
        //随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置
        var startLeft = Math.random() * documentWidth;

        //随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置
        var endLeft = Math.random() * documentWidth;

        //随机生成雪花大小
        var flakeSize = 5 + 20 * Math.random();

        //随机生成雪花下落持续时间
        var durationTime = 4000 + 7000 * Math.random();

        //随机生成雪花下落 开始 时的透明度
        var startOpacity = 0.7 + 0.3 * Math.random();

        //随机生成雪花下落 结束 时的透明度
        var endOpacity = 0.2 + 0.2 * Math.random();

        //3、克隆一个雪花模板,定义雪花的初始样式，拼接到页面中
        flake.clone().appendTo($("body")).css({
          "left": startLeft,
          "opacity": startOpacity,
          "font-size": flakeSize,
          "top": "-25px",
        }).animate({ //执行动画
          "left": endLeft,
          "opacity": endOpacity,
          "top": documentHieght
        }, durationTime, function() {
          //4、当雪花落下后，删除雪花。
          $(this).remove(); 
        });
      }, millisec);
    };
    snow();
  </script>
</body>
</html>

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

JQuery를 사용하여 눈송이를 내리는 방법

관련 기사