网页下雪效果实现

最新推荐文章于 2023-12-05 10:49:29 发布

天猫精灵998

最新推荐文章于 2023-12-05 10:49:29 发布

阅读量1.3k

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/weixin_43487782/article/details/114412179

版权

Javascript 专栏收录该内容

106 篇文章 5 订阅

订阅专栏

之前在掘金上看到过用 canvas 实现下雪效果，在网页上加一层固定定位的浮层，把 canvas 背景设为透明，然后绘制图案。

今天在博客园看到一个用DOM操作实现的下雪效果，动画效果是使用 setInterval 不断刷新实现的，后期可以改为 requestAnimationFrame 实现，另外这段代码依赖 jQuery ，然而 jQuery 也只是用来操作 DOM 元素，后期可以改用原生 JS 实现。

闲话不多说，直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script>
    (function ($) {
      $.fn.snow = function (options) {
        var $flake = $('<div id="snowbox" />').css({
          'position': 'absolute',
          'z-index': '9999',
          'top': '-50px',
          'font-family': 'PingFang SC,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif'
        }).html('&#10052;'),
          documentHeight = $(document).height(),
          documentWidth = $(document).width(),
          defaults = {
            minSize: 5,
            maxSize: 25,
            newOn: 500,
            flakeColor: getRandomColor() /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
          },
          options = $.extend({}, defaults, options);
        var interval = setInterval(function () {
          var startPositionLeft = Math.random() * documentWidth - 100,
            startOpacity = 0.5 + Math.random(),
            sizeFlake = options.minSize + Math.random() * options.maxSize,
            endPositionTop = documentHeight - 200,
            endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
            durationFall = documentHeight * 10 + Math.random() * 5000;
          $flake.clone().appendTo('body').css({
            left: startPositionLeft,
            opacity: startOpacity,
            'font-size': sizeFlake,
            color: getRandomColor()
          }).animate({
            top: endPositionTop,
            left: endPositionLeft,
            opacity: 0.2
          }, durationFall, 'linear', function () {
            $(this).remove()
          });
        }, options.newOn);
      };
    })(jQuery);
    $(function () {
      $.fn.snow({
        minSize: 5, /* 定义雪花最小尺寸 */
        maxSize: 50,/* 定义雪花最大尺寸 */
        newOn: 200  /* 定义密集程度，数字越小越密集 */
      });
    });
    var getRandomColor = function () {
      return '#' + Math.floor(Math.random() * 16777215).toString(16);
    }
  </script>
</body>
</html>

天猫精灵998

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
网页下雪效果实现

之前在掘金上看到过用 canvas 实现下雪效果，在网页上加一层固定定位的浮层，把 canvas 背景设为透明，然后绘制图案。今天在博客园看到一个用DOM操作实现的下雪效果，动画效果是使用 setInterval 不断刷新实现的，后期可以改为 requestAnimationFrame 实现，另外这段代码依赖 jQuery ，然而 jQuery 也只是用来操作 DOM 元素，后期可以改用原生 JS 实现。闲话不多说，直接上代码：<!DOCTYPE html><html lang="
复制链接

扫一扫