JavaScript實現雪花飄落效果

Posted on by

本文實例為大傢分享瞭JavaScript實現雪花飄落效果的具體代碼，供大傢參考，具體內容如下

一、實現功能

（1）添加一個背景圖片；
（2）用js語言實現雪花飄落效果；
（3）使用setInterval定時器每800毫秒創建一個雪花；
（4）把每一個雪花作為參數傳進動態下落的方法中即可。

二、展示

1.代碼展示

代碼如下：

<!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>
 <img src="1.jpg" style="height: 800px; width:1500px;">
 <script>
 function snow() {
  // 1、定義一片雪花模板
  var flake = document.createElement('div');
  // 雪花字符 ❄❉❅❆✻✼❇❈❊✥✺
  flake.innerHTML = '❅';
  flake.style.cssText = 'position:absolute;color:#fff;';

  //獲取頁面的高度 相當於雪花下落結束時Y軸的位置
  var documentHieght = window.innerHeight;
  //獲取頁面的寬度，利用這個數來算出，雪花開始時left的值
  var documentWidth = window.innerWidth;

  //定義生成一片雪花的毫秒數
  var millisec =10;
  //2、設置第一個定時器，周期性定時器，每隔一段時間（millisec）生成一片雪花；
  setInterval(function() { //頁面加載之後，定時器就開始工作
  //隨機生成雪花下落 開始 時left的值，相當於開始時X軸的位置
  var startLeft = Math.random() * documentWidth;

  //隨機生成雪花下落 結束 時left的值，相當於結束時X軸的位置
  var endLeft = Math.random() * documentWidth;

  //隨機生成雪花大小
  var flakeSize = 3 + 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>

2.效果展示

代碼如下（示例）：

總結

學會瞭使用JS語言實現雪花飄落特效效果；運用瞭定時器控制雪花出現的速度；

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：