今天在校园招聘上被问到的问题，用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. elasticsearch监控平台cerebro-0.8.3 相关操作

    上面这个平台是cerebro-0.8.3  在github上找就有了 #################### GET /hnscan_source_o_comm_drv_bad_bhv_occur/ ...

  2. Python 爬虫闯关（第一关）

    在学习爬虫时,遇到了一个有意思的网站,这个网站设置了几个关卡,需要经过爬虫进行闯关,随着关卡的网后,难度不断增加,在闯关的过程中需要学习不同的知识,你的爬虫水平也自然随之提高. 今天我们先来第一关,访 ...

  3. LOJ2722 「NOI2018」情报中心

    「NOI2018」情报中心 题目描述 C 国和D 国近年来战火纷飞. 最近,C 国成功地渗透进入了D 国的一个城市.这个城市可以抽象成一张有$n$ 个节点,节点之间由$n - 1$ 条双向的边连接的无 ...

  4. Operating System-Thread(5)弹出式线程&&使单线程代码多线程化会产生那些问题

    本文主要内容 弹出式线程(Pop-up threads) 使单线程代码多线程化会产生那些问题 一.弹出式线程(Pop-up threads) 以在一个http到达之后一个Service的处理为例子来介 ...

  5. Poj 2403 Hay Points(Map)

    一.题目大意 实现一个工资计算系统.工资的计算规则是:首先,给定一些关键字和对应的价值,这个相对于字典.然后给出的是求职者的描述,如果这个描述中包含关键字则加上对应的价值,总得价值就是这个求职者的工资 ...

  6. Project Web Server PSI 接口一些常用操作

    对Project Web Server进行二次开发,每天都把自己折腾到12点以后才休息,到处都是坑,研究那些烦人的PSI,国内根本查不到PSI相关的资料,对照API文档一点点谷歌资料,全部英文资料,开 ...

  7. 华为USG6320做双线-基于源地址的策略路由

    通过配置策略路由实现不同源地址数据通过不同的链路转发. 组网需求 某企业公司拉了两条电信的光纤,分别为静态光纤和拨号光纤,前者主要用于服务器,后者则用于一般办公. 需求如下: 静态光纤:服务器专用 拨 ...

  8. Flask01 初识flask、创建flask应用、flask启动配置

    1 什么是flask Flask是一个使用 Python 编写的轻量级 Web 应用框架.其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 . 百度百科:点击前往 中文文档: ...

  9. hadoop-2.3.0-cdh5.1.0伪分布安装（基于centos）

    一.环境 操作系统:CentOS 6.5 64位操作系统  注:Hadoop2.0以上采用的是jdk环境是1.7,Linux自带的jdk卸载掉,重新安装 下载地址:http://www.oracle. ...

  10. 用 R 画中国分省市地图

    用 R 画中国分省市地图 (2010-11-18 16:25:34) 转载▼ 标签: 中国地图 营销 杂谈 分类: 数据分析 用R 也可以做出漂亮的依参数变化的中国地图. 主要参考(http://co ...