JS和JQuery实现雪花飘落效果

下面是JS和JQuery实现雪花飘落效果的完整攻略。

1. 实现思路

要实现雪花飘落效果，需要实现以下步骤：

在页面上创建一些雪花
让雪花动起来，掉落下来
在页面底部消失后，重新回到页面上方

2. 实现步骤

2.1 创建雪花

在 HTML 文件中创建一个空的 div 元素，并设置 CSS 样式：

<div id="snow"></div>

<style>
  #snow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999999;
  }
</style>

这里主要设置了 div 元素的位置、大小以及 z-index 属性，让雪花能够覆盖在其他元素的上面。

然后使用 JavaScript 或 jQuery 创建雪花元素，将其添加到 div 元素中：

// 创建雪花
function createSnow() {
  // 创建一个 span 元素作为雪花
  var $snow = $('<span class="snowflake"></span>');

  // 随机设置雪花的初始位置、大小和透明度
  var size = Math.random() * 30 + 5;
  var opacity = Math.random();
  var left = Math.random() * ($(window).width() - size);
  var animationDuration = Math.random() * 10 + 5;

  // 设置雪花的样式
  $snow.css({
    'position': 'absolute',
    'top': '-30px',
    'left': left + 'px',
    'width': size + 'px',
    'height': size + 'px',
    'opacity': opacity,
    'animationDuration': animationDuration + 's'
  });

  // 添加雪花到 div 元素中
  $('#snow').append($snow);

  // 雪花动画结束后，将其从 DOM 树中移除
  $snow.on('animationend webkitAnimationEnd', function() {
    $(this).remove();
  });
}

上面的代码中，首先创建了一个 span 元素作为雪花，并随机设置了它的位置、大小和透明度。然后将其添加到一个名为“snow”的 div 元素中，同时设置了它的动画持续时间。最后给雪花添加了一个动画结束的事件，当雪花动画停止后，从 DOM 树中移除。

2.2 控制雪花的运动

在页面加载完成时，调用 createSnow() 函数以创建雪花：

$(function() {
  for (var i = 0; i < 50; i++) {
    createSnow();
  }
});

接着，使用 setInterval() 函数控制雪花的运动：

setInterval(function() {
  var distance = Math.random() * 10 + 5;
  $('#snow span').each(function() {
    var top = parseFloat($(this).css('top')) + distance;
    if (top > $(window).height()) {
      top = '-30px';
      $(this).css('left', Math.random() * ($(window).width() - $(this).width()) + 'px');
    }
    $(this).css('top', top + 'px');
  });
}, 50);

每隔 50 毫秒，就将所有的雪花向下移动一段距离（这里随机设置为 5 ~ 15 像素），并判断是否已经达到页面底部。如果是，就将雪花重新设置到页面上方，同时随机设置它的位置。

3. 示例说明

以下给出两个示例，一个使用 JavaScript 实现，一个使用 jQuery 实现。

3.1 示例1：使用 JavaScript 实现雪花飘落效果

<!DOCTYPE html>
<html>
<head>
  <title>雪花飘落效果</title>
  <style>
    #snow {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 999999;
    }
    .snowflake {
      display: block;
      position: absolute;
      top: -30px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 50%;
      animation: snow 10s linear infinite;
    }
    @keyframes snow {
      from {
        transform: translateY(-30px) rotate(0deg);
      }
      to {
        transform: translateY(100vh) rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <div id="snow"></div>

  <script>
    function createSnow() {
      var $snow = document.createElement('span');
      $snow.className = 'snowflake';

      var size = Math.random() * 30 + 5;
      var opacity = Math.random();
      var left = Math.random() * (window.innerWidth - size);
      var animationDelay = Math.random() * 10;
      var animationDuration = Math.random() * 10 + 5;

      $snow.style.width = size + 'px';
      $snow.style.height = size + 'px';
      $snow.style.opacity = opacity;
      $snow.style.left = left + 'px';
      $snow.style.animationDelay = animationDelay + 's';
      $snow.style.animationDuration = animationDuration + 's';

      document.getElementById('snow').appendChild($snow);

      $snow.addEventListener('animationend', function() {
        document.getElementById('snow').removeChild($snow);
      });
    }

    setInterval(function() {
      for (var i = 0; i < 5; i++) {
        createSnow();
      }
    }, 100);
  </script>
</body>
</html>

上面的示例中，使用了 CSS3 的动画特性和 JavaScript 的 DOM 操作。使用 createSnow() 函数创建了雪花元素，并设置了它的样式和动画。使用 setInterval() 函数控制雪花的运动，当雪花到达页面底部后，重新设置它的位置，然后继续下落。

3.2 示例2：使用 jQuery 实现雪花飘落效果

<!DOCTYPE html>
<html>
<head>
  <title>雪花飘落效果</title>
  <style>
    #snow {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 999999;
    }
    .snowflake {
      display: block;
      position: absolute;
      top: -30px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 50%;
      animation: snow 10s linear infinite;
    }
    @keyframes snow {
      from {
        transform: translateY(-30px) rotate(0deg);
      }
      to {
        transform: translateY(100vh) rotate(360deg);
      }
    }
  </style>
  <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
  <div id="snow"></div>

  <script>
    function createSnow() {
      var $snow = $('<span class="snowflake"></span>');

      var size = Math.random() * 30 + 5;
      var opacity = Math.random();
      var left = Math.random() * ($(window).width() - size);
      var animationDelay = Math.random() * 10;
      var animationDuration = Math.random() * 10 + 5;

      $snow.css({
        'width': size + 'px',
        'height': size + 'px',
        'opacity': opacity,
        'left': left + 'px',
        'animationDelay': animationDelay + 's',
        'animationDuration': animationDuration + 's'
      });

      $('#snow').append($snow);

      $snow.on('animationend webkitAnimationEnd', function() {
        $(this).remove();
      });
    }

    setInterval(function() {
      for (var i = 0; i < 5; i++) {
        createSnow();
      }
    }, 100);
  </script>
</body>
</html>

上面的示例中，使用了 jQuery 的选择器和 DOM 操作。使用 createSnow() 函数创建了雪花元素，并设置了它的样式和动画。使用 setInterval() 函数控制雪花的运动，当雪花到达页面底部后，重新设置它的位置，然后继续下落。同时使用 on() 函数为雪花元素绑定了一个动画结束事件，当雪花动画停止后，从 DOM 树中移除。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS和JQuery实现雪花飘落效果 - Python技术站