jQuery 实现流星雨效果（附源码）

七夏发表于 2024-10-17 18:52:06

效果如下：

![图片](https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_gif/0Ez9moTRbiaIwsM6RJK7nTIYCp2YgxxGoHofFBpJV55K4BFSo2HfswDJTDTxZGNYAbtGloEbn4QtfZrbVtmWCYg/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1)

HTML部分：

```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流星雨效果</title>
<style>
   body{
         background-image: url("xuehua2.png");
   }
   body, html {
         margin: 0;
         padding: 0;
         height: 100%;

   }
   #sky {
         width: 100%;
         height: 100%;
         position: relative;
         overflow: hidden;
   }
   .star {
         position: absolute;
         width: 2px;
         height: 2px;
         background-color: white;
         top: -2px;
         right: 0;
         opacity: 0.8;
   }
</style>
</head>
<body>
<div id="sky">
<div class="star"></div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</body>
</html>
```

js部分：

```
<script >
$(document).ready(function() {
   const $sky = $('#sky');
   const $star = $('.star');
   const starCount = 2000; // 初始雨滴数量
   const skyWidth = $sky.width();
   const skyHeight = $sky.height();

   function createStar() {
         const left = Math.random() * skyWidth;
         const size = Math.random() * 5;
         const star = $('<div class="star"></div>');
         star.css({
            width: size,
            height: size,
            left: left,
            top: -size
         });
         $sky.append(star);
         animateStar(star);
   }

   function animateStar(star) {
         const fallTime = Math.random() * 3000;
         star.animate({ top: skyHeight }, fallTime, 'linear', function() {
            star.remove();
         });
   }

   for (let i = 0; i < starCount; i++) {
         createStar();
   }

   setInterval(createStar, 10); // 每10毫秒添加一个流星
});
</script>
```

页: [1]

3BBS's Archiver

jQuery 实现流星雨效果（附源码）