今天在校园招聘上被问到的问题，用JS写出雪花的效果。我打算使用多种方法来试试如何实现雪花。

这是目前按照网上某种思路模仿的第一种雪花，不太好看，但是大致意思清楚。

思路1：该思路直接由JS实现。

  • 雪花对象的定时创建 + 雪花对象的下落方法（包含消失判定）
  • 雪花创建的位置和雪花形状的建立 + 雪花的速度和雪花可能的左右移动和消失

缺点：

  • 不好看
  • 兼容性
  • 雪花方法不好，需要实时检索元素，应该改用数组维持
<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">

		body,div{

			margin: 0;

			padding: 0;

		}

		body{

			width: 100%;

			height: 100%;

			background-color: #000;

			overflow: hidden;

		}

		#divCanvas{

			width: 800px;

			height: 800px;

			background: #212123;

		}

	</style>

</head>

<body>

<div id="divCanvas"></div>

</body>

<script type="text/javascript">

	var canvas = document.getElementById("divCanvas");

	var maxWidth = canvas.clientWidth;

	var maxHeight = canvas.clientHeight;

	function Obj() {};

	Obj.prototype.action = function(o) {

		o.style.left = Math.ceil(Math.random() * maxWidth) + "px";

		o.style.top = 0 + "px";

		var speed = 0;

		setInterval(function() {

			if (parseInt(o.style.top) < maxHeight) {

				o.style.top = parseInt(o.style.top) + speed + "px";

				speed += 5;

			} else {

				o.style.display = "none";

			}

		}, 400);

	}

	setInterval(function() {

		var oDiv = document.createElement("div");

		oDiv.style.color = "#fff";

		oDiv.innerHTML = "*";

		oDiv.style.position = "absolute";

		canvas.appendChild(oDiv);

		var obj = new Obj();

		obj.action(oDiv);

	}, 300);

</script>

</html>

思路2：该思路由JS和CSS3共同实现。

  • 雪花对象的创建 + 雪花的方法
  • 用CSS3完善雪花的渐隐和出现动画 + 雪花固定的top值增加

缺点:

  • 依旧没有用数组来维持，比较占内存
  • 不够好看
  • 兼容性
<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">

		body,div{

			margin: 0;

			padding: 0;

		}

		body{

			background: #000;

		}

		.snow{

			width: 10px;

			height: 10px;

			border-radius: 50%;

			background: #fff;

			animation: mysnow 20s;

			position: absolute;

		}

		@keyframes mysnow{

			0%{opacity: 0;}

			50%{opacity: 1}

			100%{opacity: 0;}

		}

		#canvas{

			width: 800px;

			height: 800px;

			background: #213123;

		}

	</style>

	<script type="text/javascript">

		window.onload=function(){

			var canvas=document.getElementById("canvas");

			var maxWidth=canvas.clientWidth;

			var maxHeight=canvas.clientHeight;

			function Snow(){};

			Snow.prototype.Move=function(x){

				var speed=Math.ceil(Math.random()*1);

				x.style.top=Math.floor(Math.random()*maxWidth);

				x.style.left=Math.floor(Math.random()*maxHeight);

				setInterval(function(){

					if(parseInt(x.style.top)<maxHeight){

						x.style.top=parseInt(x.style.top)+speed+"px";

					}else{

						x.style.display="none";

					}

				},30);

			}

			setInterval(function(){

				var oDiv=document.createElement("div");

				oDiv.className="snow";

				oDiv.style.top=0+"px";

				oDiv.style.left=Math.ceil(Math.random()*maxHeight)+"px";

				canvas.appendChild(oDiv);

				var snow=new Snow();

				snow.Move(oDiv);

			},200);

		};

	</script>

</head>

<body>

<div id="canvas"></div>

</body>

</html>

思路3：使用数组维持雪花对象，在一开始的时候便随机创建好每个雪花的动态属性

原型模式创建的雪花对象 + 雪花方法

优点：数组维持

缺点：

  • 没有用上 window.requestAnimationFrame方法
<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>mySnow- oH!!!Sexy!</title>

  <style type="text/css">

    body,

    div {

      margin: 0;

      padding: 0;

    }

    body {

      background: #000;

    }

    #curtain {

      width: 100%;

      height: 600px;

      background-color: #111123;

    }

    .snow {

      width: 10px;

      height: 10px;

      border-radius: 50%;

      background: #fff;

      position: absolute;

      animation: mysnow 10s;

    }

    @keyframes mysnow {

      0% {

        opacity: 0;

      }

      50% {

        opacity: 1;

      }

      100% {

        opacity: 0;

      }

    }

    .empty {

      display: none;

    }

  </style>

</head>

<body>

  <div id="curtain"></div>

</body>

<script type="text/javascript">

(function () {

  var $ = function (id) { return typeof id === "string" ? document.getElementById(id) : id };

  var curtain = $("curtain");

  var maxWidth = curtain.clientWidth - 50;

  var maxHeight = curtain.clientHeight;

  var snowControl = function () {};

  snowControl.prototype = {

    Obj: [],

    maxCount: 10,

    count: 0,

    Prepare: function () {

      for (var i = 0; i < this.maxCount; i++) {

        var o = {

          positionX: Math.ceil(Math.random() * maxWidth),

          positionY: Math.ceil(Math.random() * 50),

          speed: Math.ceil(Math.random() * 5 + 3),

          shake: Math.ceil(Math.random() * 3)

        };

        this.Obj.push(o);

      };

    },

    Init: function () {

      if (this.Obj.length) {

        var oDiv = document.createElement("div");

        oDiv.className = "snow";

        var now = this.Obj.shift();

        oDiv.style.top = now.positionY + "px";

        oDiv.style.left = now.positionX + "px";

        curtain.appendChild(oDiv);

        // 唤醒 div

        this.Move(oDiv, now);

        ++this.count;

      } else {

        return false;

      }

    },

    Move: function (oDiv, now) {

      var timer = setInterval(function () {

        if (now.positionX < maxWidth && now.positionY < maxHeight - 50) {

          now.positionY = now.positionY + now.speed;

          now.positionX = now.positionX + now.shake;

          oDiv.style.top = now.positionY + "px";

          oDiv.style.left = now.positionX + "px";

        } else {

          now.positionX = Math.ceil(Math.random() * maxWidth);

          now.positionY = Math.ceil(Math.random() * 50);

          oDiv.style.left = now.positionX + "px";

          oDiv.style.top = 0 + "px";

        }

      }, 30);

    },

    Letsgo: function () {

      var oThis = this;

      var gotimer = setInterval(function () {

        if (oThis.count == oThis.maxCount) {

          clearInterval(gotimer);

        } else {

          oThis.Init();

        }

      }, 400);

    }

  };

  var snow = new snowControl();

  snow.Prepare();

  snow.Letsgo();

})();

</script>

</html>

思路4： 使用canvas来实现雪花特效

待更...

原生JS实现雪花特效的更多相关文章

  1. 原生js实现架子鼓特效

    这是代码完成的效果,按下abcd会出现对应的架子鼓音乐的效果. 简单的介绍下代码思路,html和css部分就不多说了. 重要的是js部分. 大致是这样的, 首先获取到所有的按钮为一个数组,然后遍历整个 ...

  2. Javascript学习记录——原生JS实现旋转木马特效

    昨天学习到了JS特效部分,然后老师讲了旋转木马特效的实现,如上图.不过只是讲了通过点击箭头实现图片的切换,对于点击图片本身以及二者联动却是没有讲解. 本着一颗追求完美的心,今天花费了一个中午终于将整个 ...

  3. 原生js实现雪花飘落效果

    雪花飘落的效果实现步骤:1.使用setInterval定时器每800毫秒创建一个雪花:2.把每一个雪花作为参数传进动态下落的方法中即可. <style> *{padding: 0;marg ...

  4. HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）

    原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...

  5. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  6. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

  7. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  8. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  9. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

随机推荐

  1. CF221C Circling Round Treasures

    题目大意 给定一个$n\times m$的网格$(n,m\leq 20)$,每个格子都是$S\space \#\space B\space x\space .$中第一个. $S$表示起点,保证有且仅有 ...

  2. log4net调试

    public delegate void LogReceivedEventHandler(object source, LogReceivedEventArgs e); public sealed c ...

  3. poj 1845 Sumdiv（约数和，乘法逆元）

    题目: 求AB的正约数之和. 输入: A,B(0<=A,B<=5*107) 输出: 一个整数,AB的正约数之和 mod 9901. 思路: 根据正整数唯一分解定理,若一个正整数表示为:A= ...

  4. P1731 生日蛋糕

    题目背景 7月17日是Mr.W的生日,ACM-THU为此要制作一个体积为Nπ的M层 生日蛋糕,每层都是一个圆柱体. 设从下往上数第i(1<=i<=M)层蛋糕是半径为Ri, 高度为Hi的圆柱 ...

  5. 洛谷【P3612】[USACO17JAN]Secret Cow Code秘密奶牛码

    我对分治的理解:https://www.cnblogs.com/AKMer/p/9728574.html 题目传送门:https://www.luogu.org/problemnew/show/P36 ...

  6. web攻击之四：DOS攻击

    DDOS是DOS攻击中的一种方法. DoS:是Denial of Service的简称,即拒绝服务,不是DOS操作系统,造成DoS的攻击行为被称为DoS攻击,其目的是使计算机或网络无法提供正常的服务. ...

  7. java基础知识（10）---包

    包:定义包用package关键字. 1:对类文件进行分类管理. 2:给类文件提供多层名称空间. 如果生成的包不在当前目录下,需要最好执行classpath,将包所在父目录定义到classpath变量中 ...

  8. CoreData的使用（IOS学习）

    ——杂言:最近开始学习IOS7的开发,下文是在已经建好的项目里加入CoreData的结构,并实现一个基于coredata的简单save,query. 1. 引入Core Data Framework. ...

  9. Windchill

    判断某查询栏位是否为空 错误:if (projComp != null && !projComp.equals("")) 正确:if((projComp != nu ...

  10. 9、samtool view

    参考:https://www.sogou.com/link?url=DOb0bgH2eKh1ibpaMGjuy6YnbQPc3cuKbWqIy1k6SBFomuBEhdSpHkUUZED5fr2OTk ...